绑定在 $(document).ready();不工作

Question

执行搜索时我需要调用一个函数。搜索基于输入字段，不一定要集成到表单中。我只需要搜索字段的值。

由于我需要框架的一些功能——这是处理降价文件——我必须将绑定放在现有的$(document).ready(); 部分中。

我很难让它发挥作用。

用我的绑定记录准备好的部分

$(document).ready(function () {

    // stage init stuff
    registerFetchConfig();
    registerBuildNavigation();
    extractHashData();

    appendDefaultFilenameToHash();

    $(window).bind('hashchange', function () {
        window.location.reload(false);
    });


    loadContent($.md.mainHref); // this parts generates the HTML for the page

    // the part I integrated 
    console.log( ':: Before binding' );
    $( '#srch-term' ).change( function(  ) { 
        alert( "change" );
        console.log( '### This is a binding on submit' );
    } );
    /*
    $( '#subsearch' ).on( 'click', function(  ) {  
            alert( "### This is binding on clicking the button" );
    } );
    */
    console.log( ':: After binding' );
    // end of my part   
});

同一html页面中的搜索字段

<form class="navbar-form" role="search" id="searchform" onsubmit="return false">
   <div class="input-group">
     <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
     <div class="input-group-btn">
       <button class="btn btn-default" type="submit" id="subsearch">
         <i class="glyphicon glyphicon-search"></i>
       </button>
     </div>
   </div>
 </form>

文件本身可在线获取：mdwiki-debug.html 并基于 MDwiki

在萤火虫控制台我看到两个条目

:: Before binding
:: After binding

但是当我在搜索字段中输入一个字符串并按回车键或单击按钮时，控制台中没有显示任何内容。

我也尝试绑定提交，但这也不起作用。此外，表格不应最终提交，因为我必须避免重新加载。这就是为什么我在表单标签中有onsubmit="return false"。

当搜索字段已填满并且用户按回车键或单击按钮时，如何使绑定起作用？

Answer 1

如果searchform 不是您尝试绑定的页面，jQuery 将找不到该元素，因此它没有将事件处理程序绑定到的元素。

在这种情况下，委托事件处理程序可能是合适的，因为事件处理程序将绑定到已知已存在的元素。一种常用的方法是将事件处理程序绑定到document 或document.body。

例如

$(document).on('click', '#subsearch', function(e) { ... });

为了说明区别：

$(function() {
  
  // this won't be able to run because #foo isn't in the DOM yet
  $('#foo').on('click', function() {
    console.log('First!');
  });

  // could use '#container' or document.body or any other 
  // already known element here
  $(document).on('click', '#foo', function() {
    console.log('Second!');
  });

  // add #foo after 1 second to simulate content that is injected later
  setTimeout(function() { 
    $('#container').append('<button id="foo">Click me</button>'); 
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

Answer 2

你可以使用

$(function(){
  console.log("Document is ready");
});

在 JQuery 中用于在文档准备好后执行任何代码。

在您的 HTML 中，请注意关闭您的 标记。