-1

我在使用 ajax 生成的选择器时遇到问题。

基本上我有一个默认状态的开始按钮。onclick，它启动了一些东西，然后单击还从带有结果的 ajax 调用中引入了一个新的 div。其中一项是停止按钮。我从主页链接的脚本有一个点击事件附加到这个停止按钮

<a id="stop">stop</a>

如果我把脚本内联，在返回调用它自己也打印锚，我可以访问它

$('#stop').click(function() {   });

但是，我不希望那里有脚本（因为每页有多个项目，将它放在主链接资源中更有意义）。如果此调用位于主页的链接工作表中，则不会发生任何事情。

为什么是这样？

我应该使用另一个“文档就绪”包装器来处理返回元素吗？

4

3 回答 3

2

如果

<div id="container"></div>

是将ajax调用结果附加到的元素，

你想做：

$('#container').on('click', '#stop', function() { console.log('test'); });

或者你可以做类似的事情

$('#stop').live('click', function(){ console.log('test'); });

但如果您要在页面上处理大量事件，我不建议您这样做，因为live每次使用都会增加开销。

于 2013-02-21T14:49:37.827 回答
2

我对您的问题的理解是，您创建的点击事件不会触发通过 ajax 添加的元素。当您将处理程序附加到元素的单击事件时，这只发生在当前位于 DOM 中的那些元素上。你有几个选择来获得你想要的行为。

1）使用低效的“实时”处理程序。（效率低下通常以毫秒为单位）

$('#stop').live('click', function(){});

2) 在元素插入 DOM 后重新附加事件处理程序。

$.ajax({
    complete: function(){
        $('#idOfTheElementsYouJustInserted').click(function(){});
    }
});

3) 将事件处理程序附加到静态父元素，以便在单击按钮时，事件“冒泡”并触发此事件。要引用创建气泡的元素，可以使用 event.target ，其中 event 是传递给函数的默认参数。

$('#staticParentElement').click(function(event) { var elementClicked = event.target;   });
于 2013-02-21T14:55:45.040 回答
-2

您的主脚本没有将事件添加到您的新元素，因为它是在元素存在之前运行的。

是否可以在主脚本中创建函数，然后在添加事件时简单地指定函数 -

主脚本

var your_function = function() {
    // your code
}

然后当你添加 div -

$('#stop').click(your_function());

更好的解决方案是 Brad M 建议将事件添加到父级并在它冒泡时对其进行处理。

于 2013-02-21T14:47:41.300 回答