动态生成的目标元素(Jquery)

Question

我目前有类似的东西(http://jsfiddle.net/my7bM/)在页面上工作,只要它是使用php生成的,但是在另一个页面上有相同的功能发生,只在该页面上的内容是使用Ajax动态生成并且脚本不起作用(JS新手因此最感谢任何帮助)

我试过这个,但它仍然无效

$('.read-more').on("click", function (e) {
    e.preventDefault();
    $(this).closest('.member-content').next('.contentDiv').find('.myContent').show();
    $(this).hide();
    return false;
    );

$('.close-more').on("click", function (e) {
    e.preventDefault();
    $(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
    $(this).closest('.myContent').hide();
    return false;
});

任何帮助都会很棒,谢谢!

Answer 1

您需要事件委派来处理事件以动态添加DOM.

事件委托允许我们将单个事件侦听器附加到父元素,该元素将为匹配选择器的所有子项触发,无论这些子项现在是存在还是将来添加.

试试这个:

 $(document).on("click",'.close-more', function (e) {
  e.preventDefault();
  $(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
  $(this).closest('.myContent').hide();
  return false;
});

也更喜欢使用最接近的父DOM(保持静态)而不是 $(document)