Question

好的，所以我知道这个问题令人困惑，但是这里发生了什么。我有一个＆＃39;帖子＆＃39;元素，在整个页面中重复，如下所示：

$('#{{ product.handle }}').on('submit', function (additem) {
    $(this).find(':input[type=submit]').prop('disabled', true).val('Sample Added!');
    let CartNotEmpty = localStorage.getItem('sample') !== null;
    let itemsCart = CartNotEmpty ? JSON.parse(localStorage.getItem('sample')) : Array();
    itemsCart.push('#{{ product.handle }}');
    localStorage.setItem('sample', JSON.stringify(itemsCart));
});


let cart = JSON.parse(localStorage.getItem('sample'));


if ($.inArray('#balancing-treatment-sample', cart) !== -1) {
    $('#balancing-treatment-sample-wrap').addClass("added");
    $('#balancing-treatment-sample-buy').prop('disabled', true).val('Sample Added!');
}
if ($.inArray('#cleanser-mask-sample', cart) !== -1) {
    $('#cleanser-mask-sample-wrap').addClass("added");
    $('#cleanser-mask-sample-buy').prop('disabled', true).val('Sample Added!');
}

并设置了我的jQuery，这样当你点击div.follow按钮时它就会改为＆＃39;跟随＆＃39;并发送POST到PHP页面。设置如下：

          <div class="post-basic" id="post-{unique id}">
            <div class="title-card">
              <div class="avatar-sec">
                <img src="{link to avatar}" class="avatar" ref="Avatar" />
              </div>
              <div class="name-card">
                <span class="display-name">{display name}</span>
                <span class="handle">@{handle}</span>
              </div>
              <div class="action">
                <div class="follow-button {filled with either: follow or followed}" id="{unique id}">
                  {filled with either: follow or followed}
                </div>
              </div>
            </div>
          </div>

我刚刚开始使用jQuery，所以我确定还有很多其他方法可以做同样的事情，但实质上是：点击$('.follow-button').click( function() { var user_id = $(this).attr('id'); var follow_url = "./func/follow.func.php"; if ($(this).hasClass("follow")) { $(this).removeClass('follow').addClass('followed').text('followed'); $.ajax({ type: "POST", url: follow_url, data: {id:user_id}, // serializes the form's elements. success: function(data) { $('#'+user_id).parents('.post-basic').remove(); $.ajax({ type: "POST", url: "./func/gather.basic.func.php", data: {}, // serializes the form's elements. success: function(data) { var response = $.parseJSON(data); $('.posts').append('<div class="post-basic" id="post-'+ response[0].streamID_gather +'"><div class="title-card"><div class="avatar-sec"><img src="'+ response[0].avatarSrc +'" class="avatar" ref="Avatar"/></div><div class="name-card"><span class="display-name">'+ response[0].display_name +'</span><span class="handle">@'+ response[0].name +' '+ response[0].followsYou +'</span></div><div class="action"><div class="follow-button '+ response[0].follow +'"id="'+ response[0].streamID_gather +'">'+ response[0].follow +'</div></div></div></div>'); } }); } }); } } );时{{1}内的文字}}更改为已关注，div.follow-button更改为div。然后，向class发送followed请求。如果请求成功处理，它将向POST发送另一个请求，该请求返回"./func/follow.func.php";数组。然后，对于数组，"./func/gather.func.basic.php";将向容器json添加一个新的jQuery，与其他人一起添加响应数据。它做的。上面说的一切都有效，而且一切都很好。但是，当我尝试使用新的div.posts单击“关注”按钮时，它不起作用。是因为jQuery已经加载了还是什么？

Answer 1

正如OP的评论中提到的，我认为这是关于事件监听器如何在javascript中工作的问题。

当你这样做时：

$('.follow-button').click(handlerFunction);

它将事件绑定到 ONLY DOM中当前匹配的项目。

如果您要添加＆amp;删除要响应同一事件处理程序的元素，您有两个选项：

1）在将新内容插入DOM之后更新事件处理程序...您需要再次致电$(selector).on('click', handlerFunction)

或......更好的解决方案

2）将事件附加到DOM中没有变化的父元素 ......例如。

$('body').on('click', '.follow-button', handlerFunction);

附加了HTML的正文的事件监听器，但只有在＆＃34;单击＆＃34;时才会触发该事件。 item与选择器匹配...

同样你可能想把它放在更具体的父元素上，而不是身体。我不知道你的页面结构，所以认为这是一个简单的例子。

将新元素追加到div，jQuery停止为新元素工作

1 个答案: