Question

我想创建搜索建议。输入类型以这种方式创建：

 <div class="signup_content_3">
   <div class="signup_fieldName">
      <p>
          title
      </p>
   </div>
   <div class="signup_text signup_input signup_search_parent" id="signup_flavorActor">
       <input type="text" class="signup_searchType">
       <div class="signup_suggestion">

       </div>
   </div>

我找到密钥的jQuery函数是：

$('.signup_searchType').keyup(function(event){
  $.ajax({url:"http://localhost:8000/auth/search/",success:function(result){
        id=event.target.id;
        var parent=event.target.parentElement.parentElement;
        var add=parent.getElementsByClassName('signup_suggestion')[0];
        add.style.display='block';
        var child=add.firstChild;
        while(add.firstChild){
            add.removeChild(add.firstChild);
        }
        for(var i=0;i<Object.keys(result).length;i++){
            var div=document.createElement('div');
            div.innerHTML=result[i];
            div.className='signup_oneSuggestion';
            add.appendChild(div);
        }
    }})
});

我的jQuery点击功能是：

$('.signup_oneSuggestion').click(function(event){
    console.log('click');
});

当我输入搜索类型时会出现搜索建议，但是当我点击它们时，不会在控制台中打印任何内容。

Answer 1

将.on()（jQuery 1.7）与元素的祖先一起使用，因为它是动态创建的

$('.signup_suggestion').on('click', '.signup_oneSuggestion', function(event) {
  console.log('click');
});

Answer 2

可以通过这种方式为动态创建的元素分配事件

$('body').on('click', '.signup_oneSuggestion', function(event) {
  console.log('click');
});

jQuery .click（）在搜索建议中不起作用

2 个答案: