Question

我正在尝试记录异步生成的锚点击。

异步调用 - 完全正常 - 看起来像这样：

 $("#txt_search").keyup(function() {
    var search = $("#txt_search").val();

    if (search.length > 0)
    {
      $.ajax({
        type: "post",
        url: "<?php echo site_url ('members/searchmember') ;?>",
        data:'search=' + search,
      success: function(msg){
        $('#search_results').html("");
        var obj = JSON.parse(msg);

        if (obj.length > 0)
        {
          try
          {
            var items=[];   
            $.each(obj, function(i,val){                      
                items.push($('<li class="search_result" />').html(
                  '<img src="<?php echo base_url(); ?>' + val.userImage + ' " /><a class="user_name" href="" rel="' + val.userId + '">'
                  + val.userFirstName + ' ' + val.userLastName 
                  + ' (' + val.userEmail + ')</a>'
                  )
                );
            }); 
            $('#search_results').append.apply($('#search_results'), items);
          } 
          catch(e) 
          {   
            alert(e);
          }   
        }
        else
        {
          $('#search_results').html($('<li/>').text('This user does not have an account yet'));   
        }   

      },
      error: function(){            
        alert('The connection is lost');
      }
      });
    }
  });

我想要的主播是<a class="user_name" href="" rel="' + val.userId + '">' + val.userFirstName + ' ' + val.userLastName + ' (' + val.userEmail + ')</a>'

我使用此功能检测到这些锚点的点击：

  // click op search results
  $("a.user_name").on('click', function(e) {
    e.preventDefault(); 
  });

问题似乎是preventDefault没有做任何事情......我在Stackoverflow上查看了大部分涉及此问题的问题，并检查了jQuery自己关于该主题的文档，但我不能似乎发现了什么是错的。我已经尝试在AJAX调用中添加async: false语句，因为可能异步调用可能是问题，但是没有修复它。

Answer 1

除非使用on()将事件委托给父元素或文档，否则事件不会与动态添加的元素绑定。您必须使用不同的on形式进行事件委派。

$(document).on('click', 'a.user_name', function(e) {
    e.preventDefault(); 
});

委派活动

事件处理程序仅绑定到当前选定的元素;他们   在您的代码调用.on（）时页面上必须存在。   要确保元素存在且可以选择，请执行事件   绑定在文档就绪处理程序中的元素   页面上的HTML标记。如果将新HTML注入页面，   选择元素并在新HTML之后附加事件处理程序   放入页面。或者，使用委派事件来附加事件   处理程序，如下所述。

委派事件的优势在于它们可以处理来自的事件   稍后添加到文档中的后代元素。通过   选择一个保证在当时存在的元素   附加了委托事件处理程序，您可以使用委派事件来避免需要   经常附加和删除事件处理程序Reference

Answer 2

您展示的.on()语法只会将处理程序绑定到当时与选择器匹配的元素 - 而不是将来添加的元素。试试这个：

$("#search_results").on("click", "a.user_name", function(e) {
  e.preventDefault(); 
});

这会将处理程序绑定到父元素，然后当发生单击时，如果实际目标元素与单击时.on()的第二个参数中的选择器匹配，则jQuery仅调用您的回调函数。因此它适用于动态添加的元素（只要在上面运行时父存在）。

Answer 3

这应该适合你 -

$('.search_result').on('click', 'a.user_name', function(){
    // your code here
    // code
    return false;   
});

Answer 4

试试这个

 $("a.user_name").on('click', function(e) {
    return false;
  });

或

  $(document).on('click', 'a.user_name', function(e) {
      e.preventDefault(); 
          });

Difference between .on() functions calls

Answer 5

我也遇到了这个问题，事实证明我的选择器错了。

Answer 6

也可能是你与其他听众联系的href。检查 event.preventDefault event.stopImmediatePropagation（）; 一起。您可以查看此站点以获取更多信息 https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/

preventDefault无法锚定

6 个答案:

委派活动