類在動態生成的按鈕jQuery不能正常工作，引導

我使用jQuer，Ajax生成表。所有的東西都能正常工作，但編輯按鈕無法正常工作。我想單擊所有數據（屬性）。如果我這樣做與PHP一樣工作正常，但我需要使用jQuery。這是我的代碼。類在動態生成的按鈕jQuery不能正常工作，引導

====================表的代碼===========

$("#get_spare_list").click(function() { 
    var ht = ""; 
    $.ajax({ 
     url: "<?php echo base_url('Spare/get_all_spare_json'); ?>", 
     type: 'POST', 
     dataType: 'json', 
     data: {"param1": 'value1'}, 
    }) 
    .done(function(data) { 
     var no = 1; 
     var ht = "<table class='table'><thead><tr><th>No</th><th>Name</th><th>Code</th><th>Min qty</th><th>uni</th><th>Group</th><th>Sub Category</th><th>Part Number</th><th>Location</th><th>Image</th><th>Barcode</th><th>Tyre</th><th>Back</th></tr></thead>"; 
     $.each(data, function(key, val) { 
      ht +="<tr>"+"<td>"+no+"</td>"+"<td>"+val.name+"</td>"+"<td>"+val.code+"</td>"+"<td>"+val.min_qty+"</td>"+"<td>"+val.unit+"</td>"+"<td>"+val.group+"</td><td>"+val.sub_category+"</td><td>"+val.part_number+"</td><td>"+val.location+"</td>"; 
      if (val.image) { 
       ht += "<td><a target='_blank' href='"+"<?php echo base_url('../images/'); ?>/"+val.image+"'><button class='fa fa-picture-o'></button></a></td>"; 
      }else{ 
       ht += "<td></td>"; 
      } 
      ht += "<td><button class='btn btn-info btn-xs' onclick=PrintBar('val.code')>Print</button></td>"; 
      ht +="<td>"+val.tyre+"</td>"; 
      ht += "<td>"; 
       if (val.reusable) { 
        ht +="yes"; 
       }else{ 
        ht+="no"; 
       }; 
      ht += "</td>"; 
      ht += "<td><button class='btn edit btn-info btn-xs' data-toggle='modal' data-target='#editModel' data-id='"+val.id+"' data-name='"+val.name+"' data-code='"+val.code+"' data-min_qty='"+val.min_qty+"' data-unit='"+val.unit+"' data-group='"+val.group+"' data-sub_category='"+val.sub_category+"' data-part_number='"+val.part_number+"' data-location='"+val.location+"' data-tyre_number='"+val.tyre+"' data-back='"+val.reusable+"'><span class='fa fa-edit'></span></button></td>"; 
      ht += "</tr>"; 
      no++; 
     }); 
     $("#js_res").append(ht); 
     console.log(ht); 
    }) 
    .fail(function() { 
     alert("error"); 
    }); 
});

====== ==類代碼複製數據============

$(".edit").click(function() { 
    $("#id").val($(this).data('id')); 
    $("#name").val($(this).data('name')); 
    $("#code").val($(this).data('code')); 
    $("#min_qty").val($(this).data('min_qty')); 
    $("#unit").val($(this).data('unit')); 
    $("#group").val($(this).data('group')); 
    $("#sub_category").val($(this).data('sub_category')); 
    $("#part_number").val($(this).data('part_number')); 
    var location = $(this).data('location'); 
    var l1 = location.split("->"); 
    $("#room").val($.trim(l1[0])); 
    $("#rake").val(l1[1]); 
    $("#line").val(l1[2]); 
    $("#box").val(l1[3]); 
    if ($(this).data('tyre_number')) { 
     $("input[name=tyre][value=" + $(this).data('tyre_number') + "]").prop('checked', true); 
    }else{ 
     $("input[name=tyre][value='']").prop('checked', true); 
    }; 
    if ($(this).data('back') == "1") { 
     $("#back").attr('checked', true); 
    }else{ 
     $("#back").removeAttr('checked'); 
    }; 
});

來源

2017-05-04 chigs

可能的d [在jQuery中，如何將事件附加到動態html元素？]（http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements） – vijayP

你的'onclick = PrintBar（'val.code'）'應該是'onclick = PrintBar（''+ val.code +''）' –

而不是click功能，您可以使用.on()功能

$(document).on('click','.edit', function() {將在綁定事件。編輯e在綁定事件發生時不存在的元素。這就是所謂的事件代表團

$(document).on("click", ".edit", function() { 

    // your code here 
})

來源

2017-05-04 07:29:48

非常感謝，它的工作原理。我可以知道直接點擊不起作用的原因嗎？ – chigs

$（document）.on（'click'，'。edit'，function（）{將在綁定事件時不存在的.edit元素上綁定事件，這被稱爲事件委託 –

ohk。謝謝 – chigs

這是因爲動態生成的元素，所以不會在初始頁面加載存在。

使用$.fn.on()

從文檔

$(staticAncestors).on(eventName, dynamicChild, function() {});

在你的情況，這將是：

$(document).on("click", ".edit", function() { 

    $("#id").val($(this).data('id')); 
    $("#name").val($(this).data('name')); 
    $("#code").val($(this).data('code')); 
    $("#min_qty").val($(this).data('min_qty')); 
    $("#unit").val($(this).data('unit')); 
    $("#group").val($(this).data('group')); 
    $("#sub_category").val($(this).data('sub_category')); 
    $("#part_number").val($(this).data('part_number')); 
    var location = $(this).data('location'); 
    var l1 = location.split("->"); 
    $("#room").val($.trim(l1[0])); 
    $("#rake").val(l1[1]); 
    $("#line").val(l1[2]); 
    $("#box").val(l1[3]); 
    if ($(this).data('tyre_number')) { 
     $("input[name=tyre][value=" + $(this).data('tyre_number') + "]").prop('checked', true); 
    }else{ 
     $("input[name=tyre][value='']").prop('checked', true); 
    }; 
    if ($(this).data('back') == "1") { 
     $("#back").attr('checked', true); 
    }else{ 
     $("#back").removeAttr('checked'); 
    }; 
})

關於爲什麼這不起作用更詳細，請參閱： Event binding on dynamically created elements?

來源

2017-05-04 07:33:00 Lissy

類在動態生成的按鈕jQuery不能正常工作，引導

回答

相關問題