8

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

异步调用——效果很好——看起来像这样：

 $("#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 调用中添加一条语句，因为异步调用可能是问题所在，但这并没有解决问题。

4

6 回答 6

14

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

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

委托事件

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

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要，参考

于 2013-05-27T11:55:35.473 回答
4

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

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

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

于 2013-05-27T11:55:58.477 回答
3

这应该适合你 -

$('.search_result').on('click', 'a.user_name', function(){
    // your code here
    // code
    return false;   
});
于 2013-05-27T12:01:08.663 回答
1

尝试这个

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

或者

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

.on() 函数调用之间的区别

于 2013-05-27T11:54:22.787 回答
1

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

于 2017-12-29T06:54:22.893 回答
0

我也有这个问题，结果我的选择器错了。

于 2013-11-08T16:39:37.197 回答