0

我在将 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>");
}
4

3 回答 3

1

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

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

于 2012-02-20T16:33:20.253 回答
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而是使用该方法。

于 2012-02-20T16:34:32.643 回答
1

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

onclick='flyout('fb')'

部分有三个四个单引号。第二个引号关闭第一个引号，第三个引号开始一个新字符串。尝试如下逃避它

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

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

于 2012-02-20T16:39:48.277 回答