将点击处理程序绑定到动态元素

Question

当我动态创建一个新的link时，我无法捕捉到点击事件

$("#div").html("<a href="#" id="new">new link</a>);

$("#new").click(function(e) { //doesn't catch
   e.preventDefault();
   alert('click');
}

如何将处理程序绑定到动态元素？

Answer 1

您不能通过 ID 引用创建的元素，因为它尚未添加到 DOM，并且 jQuery 在 DOM 中搜索 ID。而是保存对该元素的引用并将点击附加到该元素。

var div = $('<div>').attr('id', 'div');
var link = $('<a>')
  .attr('href', '#')
  .attr('id', 'new')
  .on('click', function(e) {
    e.preventDefault();
    alert('click');
  })
  .appendTo(div);

Answer 2

实际上，这对我来说很好用：updated fiddle

您的原始代码中存在一些语法错误。

$("#div").html("<a href='#' id='new'>new link</a>");
fixed quotes here ------^^^                      ^
fixed missing end quote here --------------------^

// works fine!
$("#new").click(function(e) {
    e.preventDefault();
    alert('click');
});

Answer 3

You should try this post out

看起来它会回答你的问题。

总结一下，试试

$(".test").click(function () {
$.ajax({ url: 'http://.....your path...../accounts/index',
    data: {test:1},
    type: 'post',
    success: function(output) {
        //your code
             }
        }); 
});

将点击处理程序绑定到动态元素

Binding click handler to dynamic element

javascript

jquery

onclick