时间戳

首页 > 解决方案 > 点击功能上的jquery不适用于引导程序

javascript - 点击功能上的jquery不适用于引导程序

问题描述

我有一个 HTML 组件（删除坐标组件） - 按钮（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')
    })

})

标签： javascriptjqueryhtml

解决方案

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

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

到

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

这里是demo

推荐阅读