Question

有人能看到我失踪的东西吗？我现在已经坚持了一段时间。我有一个动态加载products.content.php到我页面的ajax帖子。我想将click事件绑定到通过这篇文章创建的按钮，但我只能在数据未被ajax加载时才能使用。

            $.post('product.content.php',{'page': 0}, function(data) {

            $("#products").append(data); //append data received from server

        }).fail(function(xhr, ajaxOptions, thrownError) { 
            alert(thrownError); //alert any HTTP error
        });

运行良好，但是当我想将点击事件绑定到附加数据时，我收到错误＆＃39; TypeError：thisSectionID未定义＆＃39;即使我委托了这个活动。（编辑：将var thisSectionID更改为$(this).attr('id');以查找点击按钮ID而非最近的div ID

        $(document).on('click', '.popup_open', function () {

            var thisSectionID   = $(this).closest('div').attr('id');
            var pidValSplitter   = thisSectionID.split("_");
            var pidVal         = pidValSplitter[1];

            var productPopup     = $("#product_popup");

            productPopup.popup("show");
            productPopup.html('<i class="fa fa-circle-o-notch fa-spin"></i>');

            productPopup.load("product.popup.php", {'pid':pidVal}, 
                function (responseText, textStatus, req) {
                    if (textStatus == "error") {

                      productPopup.empty();
                      productPopup.popup("hide");

                    }else{
                      productPopup.empty();
                      productPopup.html(responseText);

                          $('form').on('submit', function (e) {
                              var action                  = "voegtoe";

                              var aantalVal                = $("#aantal_" + pidVal).val();

                              var dataString = 'action='+ action + '&pid=' + pidVal + '&aantal=' + aantalVal;

                              var thisRow = $(this).closest('.row');
                              thisRow.empty();
                              thisRow.html('<i class="fa fa-circle-o-notch fa-spin"></i>');

                              $.ajax({
                                  type: 'post',
                                  url: 'functions.php',
                                  data: dataString,
                                  success: function (theResponse) {

                                      productPopup.empty();
                                      productPopup.popup("hide");
                                      $("#cart_popup").popup("show");
                                      $(".cart").html(theResponse);         

                                  },
                                  error: function (jXHR, textStatus, errorThrown) {
                                      alert(errorThrown);
                                  }
                              });
                              e.preventDefault();
                          });

                          $('.product-popup-close').click(function (e) {
                              e.preventDefault();
                              productPopup.empty();
                              productPopup.popup("hide");
                          });

                    }
            });

        });

Answer 1

要在动态创建的元素上绑定事件，请使用on()函数：

$(document).on('click', '#new_element', function() {
   // Your function here ...
});

Click事件不适用于加载Ajax的内容

1 个答案: