0

我有以下代码：

<input class="span7" type="text" id="search" name="search">
<div class="well" id="search-results" style="position: absolute;
          top: 208px;
          left: 62px;
          height: 100px;
          width: 340px;
          overflow:
          auto;">
    <ul id="list-results" style="margin: 0; padding:0; top: 0;">
    {% include 'search-results.html' %}
    </ul>
</div>

当在输入字段中完成键控时，search-result.html 将通过 ajax 显示。一个 ajax 请求会在 ul 中附加一个像这样的元素：

<li id="{{article.id}}"><a id="result-selected" href="#">{{ article.title }}</a></li>

当我使用此功能时（它显示在控制台中）：

$('#list-results').click(function(e){
      console.log($(this));
  });

当我选择其中之一时，它不会：

$('#list-results ul')
$('#list-results > ul')
$('#result-selected')
and more...

这是一个问题，这个 html 是由 ajax 呈现的，但在页面加载时它不是在乞讨？我能做些什么？我想利用显示的 a 的值来做某事。

阿贾克斯调用：

$('#search').keyup(function(){

      $.ajax({
          type: "POST",
          url:"/meal/search/",
          data:{
              'search_text': $('#search').val(),
              'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
          },
          success: searchSuccess,
          dataType: 'html'

      }

      );
  });

  function searchSuccess(data, textStatus, jqXHR){

      if ($('#search').val().length < 3){
        $('#search-results').hide();
      } else {
        $('#search-results').show();
      }

      $('#list-results').html(data);

  }
4

4 回答 4

1

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
于 2013-07-16T06:41:34.613 回答
1

当您使用动态点击功能时，请使用

on('click', function ..) or live('click', function())

将您的功能更改为实时点击

$('#list-results ul').live('click', function(e){
  console.log($(this));
});
于 2013-07-16T05:57:56.650 回答
0

尝试使用“实时”处理程序http://api.jquery.com/live/

$('#list-results ul li').on('click', function(e){
  console.log($(this));
});

当您单击列表结果 div 中的 li 元素时，将触发上述功能。

于 2013-07-16T06:07:18.217 回答
0

我在这里找到了解决方案：

http://forum.jquery.com/topic/live-is-deprecated-but-on-doesn-t-work-on-not-existent-markup

您必须首先选择父元素，然后选择尚未存在的元素。

$('#list-results').on( 'click', '#result-selected', function(){
    console.log($(this));
    console.log($(this).html());
  });
于 2013-07-16T06:42:19.347 回答