Question

我有一个HTML组件（删除坐标组件）-按钮（X），当我单击该按钮时，它想提醒消息但不起作用。

当前，我将其限制为单击功能。

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

您需要使用事件委托并更改以下内容

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

到

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

这是demo

Answer 2

这是因为当您尝试将事件处理程序附加到该按钮时，“删除”按钮尚不存在。因此$('.remove-coordinate-component')不选择任何元素，因此处理程序未附加任何内容。

使用

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

将该事件绑定到一个始终存在的元素，然后委派该事件，以便仅在单击其中的“删除”按钮时才触发该事件。这样可以灵活地在容器中搜索元素，因此即使以后添加有问题的元素也可以使用。

演示：

// 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);
  });

  $('#coordinate-container').on("click", '.remove-coordinate-component', function() {
    alert('aisle coordinate component clicked');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

有关更多详细信息，请参见“直接事件和委托事件”部分下的http://api.jquery.com/on/。

P.S。这实际上是同一主题上数十个类似的先前问题的重复，尽管由于人们以多种不同方式描述该问题并不总是很容易找到它们

Answer 3

尝试使用此

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

单击功能上的jQuery无法与引导程序一起使用

3 个答案: