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的方式有什么问题，即使DOM已经加载，$('#test').on('click',fn(){})也应该有效？

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;

Answer 2

这一行：

no_results_html.find("span").first().html(terms);

正在更改范围的内容 - 除非terms包含ID为addCompany的元素，否则没有任何内容可以绑定。除此之外，稍微不同的方法是直接绑定到元素，而不是之后尝试执行此操作：

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);
  //bind directly to the #addCompany element at this point
  no_results_html.find("#addCompany").click(function() {
    alert('clicked');
  }

  return this.search_results.html(no_results_html);

};

Answer 3

你可以考虑委托绑定，你可以使用jQuery＆＃34; on＆＃34;即

 $("#parentDivOfControlsIWantToBindClickTo").on("click", "a", function() {blah;});

第一个参数是事件，第二个是要绑定的选择器，第三个显然是你想要执行的。

这样做是将click事件绑定委托给jQuery核心，jQuery核心将监视父项目的DOM变化，需要点击（或任何你选择的）自动绑定。

See the documentation here

Answer 4

这一行：

$(document).on("click", "#test", function() {alert('clicked'); }); 这个想法来自一位开发者，但我不明白为什么他删除了答案。问题是.on('click',function(){})绑定不够全面，所以从想法加载整个文档然后选择特定元素`

    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]);
    }

     $(document).on("click", "#test", function() {
        alert('clicked');
    });

`。

使用选定的jquery添加事件后，将事件添加到按钮

4 个答案: