Binding in $(document).ready(); does not work

本文关键字：does not work ready in document Binding 更新时间：2023-09-26

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

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

我努力让它工作。

Document ready part with my binding

$(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

在firebug控制台中，我看到两个条目

:: Before binding
:: After binding

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

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

当搜索字段被填充并且用户点击enter或单击按钮时，我如何使绑定工作?

如果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>

可以使用

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

JQuery for在文档准备好后执行任何代码

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