Question

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

由于我需要框架的一些功能 - 这是处理markdown文件 - 我必须将绑定放在现有的$(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

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

:: Before binding
:: After binding

但是当我在搜索字段中输入一个字符串并按Enter或单击按钮时，nothings会出现在控制台中。

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

当搜索字段填满且用户点击进入或点击按钮时，如何让绑定生效？

Answer 1

你可以使用

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

在JQuery中，在文档准备就绪后执行任何代码。

在您的HTML中，请注意关闭您的＆lt; i＆gt;标签

Answer 2

如果尝试绑定时searchform不是页面，那么jQuery不会找到该元素，因此它没有一个元素来绑定事件处理程序。

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

e.g。

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

说明不同之处：

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

绑定在$（document）.ready（）;不起作用

带有绑定的文档就绪部分

同一html页面中的搜索字段

2 个答案: