jquery - 使用选定的 jquery 添加事件后向按钮添加事件

Question

<script src="<?php echo base_url(); ?>components/chosen_v0.12.0/chosen.jquery.js" type="text/javascript"></script>

    var config = {
      '.chzn-select'           : {},
      '.chzn-select-deselect'  : {allow_single_deselect:true},
      '.chzn-select-no-single' : {disable_search_threshold:10},
      '.chzn-select-no-results': {no_results_text:"Can't find your company? <input type='button' id='test' class='submit' value='button'/>"},
      '.chzn-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }

$('#test').on('click',function(){
    alert('Clicked');
})

我需要添加一个按钮，以防下拉菜单没有结果，除了显示消息外，我还可以做额外的工作。如果我修改 choosen.jquery.js，它工作正常，但问题是我正在使用许多页面中的jquery，我只想将其修改为特定页面

这就是我修改 choosen.jquery.js 的方式

 Chosen.prototype.no_results = function(terms) {
  var no_results_html;
  no_results_html = $('<li class="no-results">' + this.results_none_found + '"<span><button id="addCompany" class="submit">ADD</button></span>"</li>');
  no_results_html.find("span").first().html(terms);
  addnewCompany();
  return this.search_results.html(no_results_html);

};

function addnewCompany(){
  $('#addCompany').on('click',function(){
        alert('clicked');
    });
}

我在选择 id 的方式上做错了什么，但 $('#test').on('click',fn(){}) 应该可以工作，即使 DOM加载了吗？

Answer 1

您在元素进入 DOM 之前添加事件:

addnewCompany(); //Line that add the event
return this.search_results.html(no_results_html); //Line that append the element on the DOM.

反转它们:

this.search_results.html(no_results_html);
addnewCompany();
return this.search_results;