Question

我正在使用Bootstrap网站，因此我必须将所有jQuery放在页面底部，而不是放在头部。我在一些阅读中发现，这可能导致jQuery事件触发两次的行为。实际发生的是点击累积。所以第一次点击，事件触发一次，然后第二次点击它会触发两次，依此类推。是什么导致了这种行为？

此脚本的工作方式是它旨在通过运行PHP脚本来切换用户通知。一切正常。因此，当用户点击＆＃34;订阅＆＃34;链接，它订阅它们，链接被重写为＆＃34;取消订阅＆＃34;链接。这可能是我的问题发生的地方。我只是不确定如何解决这个问题。无论如何，如果用户再次点击该链接，它会切换回＆＃34;订阅＆＃34;等等。这是我的代码。

我在其他地方找到了一个提示，我可以使用e.stopImmediatePropagation来消除此行为，但它无效。

$('.subscription').bind('click', function(e) {
         e.preventDefault()
         e.stopImmediatePropagation()

         var subscribe = jQuery(this).data('subscribe')
         var forumId = jQuery(this).data('id')
         var href = jQuery(this).data('href')
         var selector = jQuery(this)

         if (subscribe == 1) {
             $('#email-notifications').modal('show')
             $('.notify').on('click', function() {
                  var response = $(this).data('response')

                  if (response == 1) {
                      // subscribe the user
                      $.post('/discussion-boards/subscribe', { notify : response, forum : forumId }, function(data) {
                          // do nothing in the callback
                      });

                      // rewrite HTML and set subscription flag to 0
                      selector.html('<span class="glyphicon glyphicon-thumbs-down"></span> Unsubscribe from this Topic').data('subscribe', 0)
                  }
             });
         } else {
             $.post('/discussion-boards/unsubscribe', { forum : forumId }, function(data) {
                 // do nothing in the callback
             })

             // rewrite HTML and set subscription flag to 1;
             selector.html('<span class="glyphicon glyphicon-thumbs-up"></span> Subscribe to this Topic').data('subscribe', 1)
         }
     })

Answer 1

根据要求，这是最终解决方案：

$('.subscription').on('click', function(e) {
         e.preventDefault()
         e.stopImmediatePropagation()

         var subscribe = jQuery(this).data('subscribe')
         var forumId = jQuery(this).data('id')
         var href = jQuery(this).data('href')
         var selector = jQuery(this)

         if (subscribe == 1) {
             $('#email-notifications').modal('show')
             $('.notify').unbind('click').bind('click', function() {
                  var response = $(this).data('response')

                  if (response == 1) {
                      // subscribe the user
                      $.post('/discussion-boards/subscribe', { notify : response, forum : forumId }, function(data) {
                          // do nothing in the callback
                      });

                      // rewrite HTML and set subscription flag to 0
                      selector.html('<span class="glyphicon glyphicon-thumbs-down"></span> Unsubscribe from this Topic').data('subscribe', 0)
                  }
             });
         } else {
             $.post('/discussion-boards/unsubscribe', { forum : forumId }, function(data) {
                 // do nothing in the callback
             })

             // rewrite HTML and set subscription flag to 1;
             selector.html('<span class="glyphicon glyphicon-thumbs-up"></span> Subscribe to this Topic').data('subscribe', 1)
         }
     })

jQuery在Bootstrap站点中发布两次

1 个答案: