javascript - jquery on click 函数不适用于 bootstrap

Question

我有一个 HTML 组件(remove-coordinate-component)- 按钮(X)，当我单击该按钮时想要提醒一条消息，但它不起作用。

目前我有一个点击函数的边界。

http://jsfiddle.net/awrf9c5s/5/

HTML:-

   <div class="row row-bordered">
          <div class="col-md-4">
              <button type="button" class="btn" id="add-aisle">Add</button>
              <div id="coordinate-container">

              </div>
          </div>
          <div class="col-md-8">
              <canvas id="myCanvas"></canvas>
          </div>
      </div>

js:

// scripts.js
var globals = {}
aisle_coordinate_component = '<div class="input-group"> \
                              <input type="text" class="form-control" id="inputKey" placeholder="X"> \
                              <input type="text" class="form-control" id="inputKey" placeholder="Y"> \
                              <input type="text" class="form-control" id="inputKey" placeholder="X1"> \
                              <input type="text" class="form-control" id="inputKey" placeholder="Y1"> \
                              <button type="button" class="close remove-coordinate-component" aria-label="Close" > \
                                <span aria-hidden="true">&times;</span> \
                              </button> \
                              </div>'


$(document).ready(function(){

    $('#add-aisle').click(function(){
        console.log(aisle_coordinate_component)
        $('#coordinate-container').append(aisle_coordinate_component);
    })

    $('.remove-coordinate-component').click(function(){
        alert('aisle coordinate component clicked')
    })

})

Answer 1

需要使用事件委托(delegate)，更改如下

  $('.remove-coordinate-component').click(function(){

到

$("#coordinate-container").on('click','.remove-coordinate-component',function() {

这里是 demo