Javascript 在替换为jquery时添加onclick事件

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

sample.html

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

首先

my.js

函数替换（）{
$（'first#u div'）。替换为（“Second”）；
}

当我单击第一个分区时，它会工作。它显示了第二个分区，但当我单击第二个分区时，它什么也不做

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

功能弹出按钮（数据）{
如果（数据==“fb”）$（第二部分）。替换为（“最后”）；
}

没有绑定到新div的单击事件

---

在replaceWith（）调用后添加新的侦听器，或者使用live（）在文档级别进行侦听。

没有绑定到新div的单击事件

---

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

代码不起作用的原因是没有将函数传递给

\sec\u div

元素的“onclick”。您将其定义为

onclick=“flyout（'fb'）；”

，但flyout函数不返回任何内容。我更改了下面的代码，以便

弹出按钮

返回一个函数，并将

数据

的值封装在其闭包中，以防您希望对

数据

参数使用具有不同值的相同函数

此外，我还提供了一个解决方案，帮助将HTML与Javascript分离。使用jquery，您可以通过使用

delegate

方法将函数绑定到任何事件来实现这一点

HTML:

首先

JS:

$（“body”）.delegate（'first#div'，'click'，replace）；
$（“body”）。代表（“#sec_div”，“click”，弹出按钮（“fb”）；
//更改为：
函数替换（）{
$（本）。替换为（“第二”）；
}
//将弹出按钮更改为：
功能弹出按钮（数据）{
返回（函数（）{
如果（数据=“fb”）{
$（本）。替换为（“最后”）；
}
});
}

编辑：

---

根据最新的jquery文档，不推荐使用

live

方法，请改用

delegate

。

代码不起作用的原因是您没有将函数传递给

\sec\u div

元素的“onclick”。您将其定义为

onclick=“flyout（'fb'）；”

，但flyout函数不返回任何内容。我更改了下面的代码，以便

弹出按钮

返回一个函数，并将

数据

的值封装在其闭包中，以防您希望对

数据

参数使用具有不同值的相同函数

此外，我还提供了一个解决方案，帮助将HTML与Javascript分离。使用jquery，您可以通过使用

delegate

方法将函数绑定到任何事件来实现这一点

HTML:

首先

JS:

$（“body”）.delegate（'first#div'，'click'，replace）；
$（“body”）。代表（“#sec_div”，“click”，弹出按钮（“fb”）；
//更改为：
函数替换（）{
$（本）。替换为（“第二”）；
}
//将弹出按钮更改为：
功能弹出按钮（数据）{
返回（函数（）{
如果（数据=“fb”）{
$（本）。替换为（“最后”）；
}
});
}

编辑：

---

根据最新的jquery文档，不推荐使用

live

方法，请改用

delegate

。

您没有在函数replace中正确转义它。

onclick='flyout('fb')' 

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

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

element=“秒”
$（'first#div'）。替换为（元素）；

---

同时签出

您没有在函数replace中正确转义它。

onclick='flyout('fb')' 

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

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

element=“秒”
$（'first#div'）。替换为（元素）；

---

也要结账

Ha？什么意思？我在secu div上有click事件，这就是问题所在。单击secu div时，它不会显示最后一个div。您在代码中单击了onclick，但DOM不会识别它。它不绑定到新元素。因为页面已经生成，所以您必须使用不同的方法绑定新事件。哈？什么意思？我在secu div上有click事件，这就是问题所在。单击secu div时，它不会显示最后一个div。您在代码中单击了onclick，但DOM不会识别它。它不绑定到新元素。由于页面已经生成，您必须使用不同的方法绑定新事件。下面的两个答案都建议使用

.live（）

函数。您可能希望使用

.on（）

函数，该函数在jQuery的最新版本中取代了

.live（）

。下面的两个答案都建议使用

.live（）

函数。您可能希望使用

.on（）

函数，该函数在jQuery的最新版本中取代了

.live（）

@不建议使用ggreiner

.live（）

函数。从jquery的文档中，

.lve（）

被

.delegate（）

方法取代。如果使用jquery 1.7+，则建议使用

.on（）

函数。@ggreiner

.live（）

函数不建议使用。从jquery的文档中，

.lve（）

被

.delegate（）

方法取代。如果使用jquery 1.7+，则建议使用

.on（）

函数。

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