preventDefault无法锚定

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自己关于这个主题的文档,但我似乎无法找到错误.我已经尝试async: false在AJAX调用中添加一个语句,因为可能异步调用可能是问题所在,但这并没有解决它.

Answer 1

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

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

委托活动

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

委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.通过挑选这是保证出席委派的事件处理程序连接时的元素,你可以使用委托的事件,以避免需要频繁安装和取下事件处理程序,参考

Answer 2

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

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

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