Question

我在使用jquery上的replaceWith上放置onclick事件时遇到了问题。我在第二次onclick事件上的功能无效。这是我的示例代码。

sample.html

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

my.js

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

当我点击first_div时，它可以正常工作。它显示了2nd_div，但是当我点击第二个div时它没有做任何事情。

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

Answer 1

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

在replaceWith（）调用之后添加一个新的监听器，或者使用live（）来监听文档级别。

Answer 2

您的代码不起作用的原因是您没有将函数传递给#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 3

您没有在功能替换中正确转义它。在

onclick='flyout('fb')'

部分有三个四个单引号。第二个引号关闭第一个引号，第三个引号开始一个新的字符串。尝试按以下方式转义

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

同时结帐http://jsfiddle.net/5Stuh/

添加onclick事件替换为jquery

3 个答案: