Question

有一个listitem的问题，当我点击所需的li时，它什么也没做。我现在，只是让它发出警报，所以我可以看到它会在我确定我可以从中获得响应后执行该功能。

Jquery的

$('.propid').click(function(){
        alert($(this).find().attr('id'));
    });

HTML

    <div>
    <form class='cform'>
      <div>
        Type in Property:
        <br />

        <input class="ui-corner-all" type="text" size="30" value="" id="inputString"  />

      </div>
      <div class="suggestionsBox" id="suggestions" style="display: none;">
        <div class="suggestionList" id="autoSuggestionsList">
          &nbsp;
        </div>
      </div>
    </form>
  </div>

在输入内容时，suggestBox将显示并填充ajax结果。

返回的html / php附加到SuggestionxBox：

'<li class="propid" id="'.$result['roomnumber'].'">'.$result['name'].'</li>';

当我点击suggestionBox内的li元素但是如果我使用

时，不确定为什么它不会发出警报

$('.suggestionBox').click(function(){
    alert($(this).find(li:first).attr('id'));
});

很棒的回答每个人，但我已经在html中分配了一个onclick事件：）

Answer 1

请记住在AJAX调用完成后分配onclick事件。只需在加载时将该脚本弹出到页面上，就不会确保所有未来/后期加载的元素也会附加事件处理程序。

简单示例：

$.ajax({
  type: "POST",
  url: "URL",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  data: "{'PARAM':'VALUE'}",
  success: function (result) {
    $("#autoSuggestionsList").append(result.d);
    $(".propid").click(function(){
        alert($(this).find().attr("id"));
    });
  }
});

Answer 2

尝试

$('.propid').live("click",function(){
        alert($(this).find().attr('id'));
    });

Answer 3

$('.propid').click(function(){ ... });将在您的网页上搜索带有“propid”类的元素，并为它们绑定点击事件。但是如果在这个绑定之后出现了一些元素 - 它们将无法工作（不会对它们进行绑定）。

这里有三种方式。

首先 - 在创建每个新元素后进行绑定。类似于：$('.propid').unbind('.my_propid').bind('click.my_propid', function() { ... })在每次ajax调用之后（我使用名称空间来避免绑定两次）。

第二 - 是为父元素进行绑定。 javascript事件可以作为参数传递给绑定函数 - 因此您可以获取事件的目标并确定 - 实际单击了哪个子元素。 $('. suggestionsBox').click(function (e) { /* work with event e */ });（http://feedproxy.google.com/~r/Bludice/~3/q0r9715M_JA/event-delegate - 您可以在此处阅读有关js中事件委派的更多信息。）

第三 - 动态控制新元素（带有实时）。 $('.propid').live('click', function() { ... });

Jquery选择li元素

3 个答案: