Question

我正在使用gulp将许多js文件合并到一个文件中。对于我需要添加JS代码的每个页面，我创建了一个新文件以保持代码分离。

我的方法的问题是当我在HTML中以多种形式重用id名称时，错误的事件可能会在错误的时间内被触发而导致一些问题。

为防止出现此问题，我通常会使用包装器启动所有选择器，大多数情况下都是表单名称。

例如

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<header id="top-area">
  <div class="container d-flex flex-column justify-content-between fHeight mh100vh">
    <div class="mn120">
      <!-- this can be generated via a pseudo ::before to be laid ubder fixed menu -->
    </div>
    <div class="row  d-flex fHeight">
      <div class="col-md-4">
        <div class="headings">
          <h1>Some Title</h1>
          <p>Some Text</p>
        </div>
      </div>
      <div class="col-md-4">
        <img src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png">
      </div>
    </div>
  </div>

上述工作完全正常，但我必须在每个选择器之前重复我的包装器ID。有没有办法让ovoid每次都要重写包装器ID，只要说下面的代码应该只包含给定的id？

换句话说，有没有办法做这样的事情（下面的代码组成了语法，所以它不起作用）

$(function(){

    $('#create_reservation_form #type').change(function(e){
        // do stuff...
    });

    $('#create_reservation_form #brand').change(function(e){
        // do stuff...
    });

    $('#create_reservation_form #category').change(function(e){
        // do stuff...
    });

});

Answer 1

您可以通过将父对象存储为变量并使用on()或委派find() on()或执行@Keith建议>

$('#create_reservation_form')
   .on('change', '#type', function(e) {
      // do stuff...
   }).on('change', '#brand',function(e) {
      // do stuff...
   }).on('change', '#category',function(e) {
      // do stuff...
   });

或者为了更清晰的组织：

$('#create_reservation_form')
   .on('change', '#type', typeChange)
   .on('change', '#brand', brandChange)
   .on('change', '#category', catChange);

// since each file will include own `$(function()` wrapper can re-use
// these function names since they will each be in own scope
function typeChange(e){
   // do stuff for type input...
}

function brandChange(e){
   // do stuff for brand input...
}

function catChange(e){
   // do stuff for category input...
}

是否有一种方式与jQuery组听众？

1 个答案: