Javascript 使用jQuery生成div时的OnClick传播
我不确定为什么事件停止传播技术不能与这个简单的onClick示例一起使用-事件似乎在DOM树上冒泡,并且每次我再次单击时都以指数形式迭代 我认为这是因为我使用javascript函数生成html,我非常想知道为什么您认为它不能按预期工作 编辑:我已经在创建了一个JSFIDLE。这个问题变得非常清楚。如果我第一次单击“Text1”,则警报弹出窗口仅出现一次。如果我再次单击它,它就会出现两次。如果我再次单击它,它会出现三次,以此类推。如何修改脚本,使其只运行一次?这让我快发疯了 HTML JavascriptJavascript 使用jQuery生成div时的OnClick传播,javascript,jquery,html,Javascript,Jquery,Html,我不确定为什么事件停止传播技术不能与这个简单的onClick示例一起使用-事件似乎在DOM树上冒泡,并且每次我再次单击时都以指数形式迭代 我认为这是因为我使用javascript函数生成html,我非常想知道为什么您认为它不能按预期工作 编辑:我已经在创建了一个JSFIDLE。这个问题变得非常清楚。如果我第一次单击“Text1”,则警报弹出窗口仅出现一次。如果我再次单击它,它就会出现两次。如果我再次单击它,它会出现三次,以此类推。如何修改脚本,使其只运行一次?这让我快发疯了 HTML Javas
调用return false应该在您的场景中起作用。我已经添加了注释,但我认为这可以更好地解释问题 问题 这里请注意,它用于初始化事件,并在事件处理程序中再次调用。以下是显示不同已注册事件的更新版本 解决方案 一个简单的解决方案是将用于通知的代码迁移到一个单独的函数,如下所示 但更好的实现方法如下:。这有点复杂,让别人很容易理解
$(function notice_it(declim) {
if ($.isNumeric(declim)) {
//stuff
} else {
declim = 10;
}
$("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
alert(declim);
$('body').on('click', '#1', function (event) {
return false;
var declim = 10 - 1;
notice_it(declim);
});
$('body').on('click', '#2', function (event) {
return false;
var declim = 10 + 1;
notice_it(declim);
});
$('body').on('click', 'body', function (e) {
e.stopPropagation();
});
});
尝试在单击时返回false您真正想做什么?在您的示例中没有出现事件。有一个额外的};最后-你是否只复制并粘贴了一半代码?ie是另一个被多次调用的函数中的.on调用。@freedomn-m,我确实回滚了它,因为我不知道您的编辑。.您好!谢谢你的回答。我已经编辑了我的问题并创建了一个JSFIDLE来向您展示我的问题。您好-谢谢您回复我。不幸的是,这没有起作用。我添加了一个JSFIDLE,以便您现在可以更清楚地看到问题。
$(function notice_it(declim) {
if ($.isNumeric(declim)) {
//stuff
} else {
declim = 10;
}
$("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
alert(declim);
$('body').on('click', '#1', function (event) {
event.stopPropagation();
var declim = 10 - 1;
notice_it(declim);
});
$('body').on('click', '#2', function (event) {
event.stopPropagation();
var declim = 10 + 1;
notice_it(declim);
});
$('body').on('click', 'body', function (e) {
e.stopPropagation();
});
});
$(function notice_it(declim) {
if ($.isNumeric(declim)) {
//stuff
} else {
declim = 10;
}
$("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
alert(declim);
$('body').on('click', '#1', function (event) {
event.stopPropagation();
var declim = 10 - 1;
notice_it(declim); // Issue
});
});
$(function notice_it(declim) {
if ($.isNumeric(declim)) {
//stuff
} else {
declim = 10;
}
$("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
alert(declim);
$('body').on('click', '#1', function (event) {
return false;
var declim = 10 - 1;
notice_it(declim);
});
$('body').on('click', '#2', function (event) {
return false;
var declim = 10 + 1;
notice_it(declim);
});
$('body').on('click', 'body', function (e) {
e.stopPropagation();
});
});