Question

有谁可以指出我在这里做错了什么？我正在尝试与数据交互（使用ajax附加）

如果元素已经在DOM中，则会触发警报，但在附加它时不会触发警报。

我使用“.on”错了吗？

$(function() {

  $('.card').on('click','.add-exercise', function() {
    alert('clicked');
  });

  // Detect 'enter' key up
  $('#search').on('keyup', function(e){
    if(e.keyCode == 13)
    {
      console.log('hit enter key');
      $(this).trigger("enterKey");
    }
  });

  $('#search').on("enterKey",function(e){

    $.ajax({
      url: '{{ url("exercises/load") }}',
      method: "POST",
      data: {
        _token: "{{csrf_token()}}",
        search: $('#search').val(),
      },
      dataType: "text",
      success: function(data) {
        console.log(data);
        $('.exercise-result').remove();
        $('.card-deck').append(data);
      }
    });

  });

});

Answer 1

我猜你在.card中有其他data元素。

您必须再次为其分配事件click。该活动目前仅分配给您的第一个.card元素。这就是为什么它不会触发您的新.card元素。

Answer 2

我相信每次附加完成后你都需要再次添加事件。试试这个，让我知道它是否有效：

function addEvent() {
  $('.card').on('click','.add-exercise', function() {
    alert('clicked');
  });
}

$(function() {
  addEvent();

  // Detect 'enter' key up
  $('#search').on('keyup', function(e){
    if(e.keyCode == 13)
    {
      console.log('hit enter key');
      $(this).trigger("enterKey");
    }
  });

  $('#search').on("enterKey",function(e){

    $.ajax({
      url: '{{ url("exercises/load") }}',
      method: "POST",
      data: {
        _token: "{{csrf_token()}}",
        search: $('#search').val(),
      },
      dataType: "text",
      success: function(data) {
        console.log(data);
        $('.exercise-result').remove();
        $('.card-deck').append(data);
        addEvent();
      }
    });

  });

});

Answer 3

我认为.card元素也是动态加载的，为了使event delegation正常工作，你需要将它绑定到页面加载时出现的元素。

因此，您可以将其附加到document对象。

$(document).on('click','.card .add-exercise', function(){ 
   // rest of your code
});

或更好的方法是，附加到页面加载时出现的元素（我猜在页面加载时出现.card-deck，因为您要向其附加数据或附加到{{ 1}}标签）。

body

jQuery与附加数据交互

3 个答案: