javascript - 与输入控件关联的 Bootstrap 按钮不起作用

Question

我有一个与输入控件关联的按钮，单击时我想调用一个函数。

<div class="col-xs-4 selectContainer">
<label for="fldVIN" >VIN</label>
<div class="input-group">
    <input type="text" id="fldVIN" data-bind="value:VIN" class="form-control" placeholder="Search VIN to retrieve the details"/>
    <span class="input-group-btn">
        <button class="btn btn-secondary" type="button" id="searchVINBtn">Go!</button>
    </span>
</div>

这是我尝试过的示例脚本，但它没有调用点击函数。

    $(document).ready(function()
{
registerEventHandlers();
});

function registerEventHandlers(){
$('#searchVINBtn').click(function(e){
         getCRMorDMSDetails() ;
      });
});

function getCRMorDMSDetails()
            {
            alert('hi');                
            }

Answer 1

在 registerEventHandlers 函数之后有一个额外的 )。

您的浏览器的错误控制台会向您指出这一点。 这应该始终是您首先查看的地方。

工作版本:

  $(document).ready(function() {
    registerEventHandlers();
  });

  function registerEventHandlers() {
    $('#searchVINBtn').click(function(e) {
      getCRMorDMSDetails();
    });
  }; /* Remove ")" from this line */

  function getCRMorDMSDetails() {
    alert('hi');
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="col-xs-4 selectContainer">
  <label for="fldVIN">VIN</label>
  <div class="input-group">
    <input type="text" id="fldVIN" data-bind="value:VIN" class="form-control" placeholder="Search VIN to retrieve the details" />
    <span class="input-group-btn">
        <button class="btn btn-secondary" type="button" id="searchVINBtn">Go!</button>
    </span>
  </div>