在用jquery替换时添加onclick事件

Question

我在将 onclick 事件放在 jquery 上的 replaceWith 上时遇到问题。我在第二次 onclick 事件中的功能不起作用。这是我的示例代码。

示例.html

<div id = "first_div" onClick = "replace()">First</div>

我的.js

function replace() {
    $('#first_div').replaceWith("<div id = 'sec_div' onclick='flyout('fb')'>Second</div>");
}

当我单击 first_div 时，它可以工作。它显示了 2nd_div，但是当我单击 2nd_div 时，它什么也没做。

function flyout(data){
    if (data == "fb") $('#sec_div').replaceWith("<div>Last</div>");
}

Answer 1

您的代码不起作用的原因是您没有将函数传递给#sec_div 元素的“onclick”。您将其定义为onclick="flyout('fb');"，但弹出功能不返回任何内容。我更改了下面的代码，以便flyout 返回一个函数并将data 的值封装在它的闭包中，以防您想为data 参数使用具有不同值的相同函数。

另外，我提供了一个解决方案，可以帮助您将 HTML 与 Javascript 分开。使用 jquery，您可以通过使用 delegate 方法将函数绑定到任何事件来实现。

HTML：

<div id="first_div">First</div>

JS：

$("body").delegate('#first_div', 'click', replace);
$("body").delegate('#sec_div', 'click', flyout("fb"));

// change replace to:
function replace() {
    $(this).replaceWith("<div id='sec_div'>Second</div>");
}
// change flyout to:
function flyout(data){
    return (function(){ 
       if (data == "fb") {
          $(this).replaceWith("<div>Last</div>"); 
       }
    });
}

编辑： 根据最新的 jquery 文档，不推荐使用 live 方法，请改用 delegate。

Answer 2

您没有在函数替换中正确地转义它。

onclick='flyout('fb')' 

part 有三个四个单引号。第二个引号关闭第一个引号，第三个引号开始一个新字符串。尝试如下转义它

  element="<div id = 'sec_div' onclick='flyout(\"fb\")'>Second</div>"
$('#first_div').replaceWith(element);

也结帐http://jsfiddle.net/5Stuh/

Answer 3

没有绑定到新 div 的点击事件。

在 replaceWith() 调用之后添加一个新的侦听器，或者使用 live() 在文档级别进行侦听。