Ajax получает вызов только для первой кнопки

Question

<?php $count = 1; foreach ($settings[$slug] as $slug): ?> 
    <div data-toggle="buttons-radio" class="btn-group"> 
     <button id="enable" value="1" class="btn btn-success active" type="button"   name="includeicon"><i class="icon-ok icon-white"></i></button> 
     <button id="disable" value="0" class="btn" type="button" name="includeicon"><i class="icon-remove"></i></button> 
    </div> 
<?phpendforeach?> 

$(document).ready(function(){ 

    $("#enable").click(function(event) { 
    var slugid = $('#slugid').val(); 
    $.ajax({ 
      url: SITE_URL + 'admin/PluginConf/enable/?'+slugid, 
     type: "POST", 
     data : {'slugid' : slugid}, 
     success: function(data) { 
        } 
       }); 
    }); 

    $("#disable").click(function(event) { 
    var slugid = $('#slugid').val(); 
    $.ajax({ 
     url: SITE_URL + 'admin/PluginConf/disable/?'+slugid, 
     type: "POST", 
     data : {'slugid' : slugid}, 
     success: function(data) { 
        } 
    }); 
    }); 
     }); 

Я передаю идентификатор кнопки в jquery, но ajax вызывается только для первой кнопки. Для второго и других это не называется, может ли кто-нибудь помочь мне в этом? Thanks

Answer 1

Не связывайте события click для нескольких элементов по идентификатору! Идентификаторы должны быть уникальными идентификаторами.

<?php $count = 1; foreach ($settings[$slug] as $slug): ?> 
    <div data-toggle="buttons-radio" class="btn-group"> 
     <button value="1" class="enable btn btn-success active" type="button"   name="includeicon"><i class="icon-ok icon-white"></i></button> 
     <button value="0" class="btn disable" type="button" name="includeicon"><i class="icon-remove"></i></button> 
    </div> 
<?phpendforeach?> 

$(document).ready(function(){ 

    $(".enable").click(function(event) { 
    var slugid = $('#slugid').val(); 
    $.ajax({ 
      url: SITE_URL + 'admin/xervPluginConf/enable/?'+slugid, 
     type: "POST", 
     data : {'slugid' : slugid}, 
     success: function(data) { 
        } 
       }); 
    }); 

    $(".disable").click(function(event) { 
    var slugid = $('#slugid').val(); 
    $.ajax({ 
     url: SITE_URL + 'admin/xervPluginConf/disable/?'+slugid, 
     type: "POST", 
     data : {'slugid' : slugid}, 
     success: function(data) { 
        } 
    }); 
    }); 
}); 

Answer 2

У вас есть идентификатор enable и disable в foreach. Если цикл когда-либо выполняется более одного раза, у вас будет несколько кнопок с одним и тем же идентификатором. Идентификаторы должны быть уникальными! Скорее всего использовать что-то еще, чтобы определить щелчок:

Я предлагаю добавление enable класса кнопки включить и disable класса на кнопку отключения, а затем поймать события, как это:

$('.enable').click(function() { 
    // code in here 
}); 

$('.disable').click(function() { 
    // code in here 
}); 

Answer 3

Вы используете идентификатор что неверно, когда несколько элементов в ваших кнопках имеют одинаковый идентификатор. Когда вы используете цикл foreach, вы создаете несколько кнопок с одним и тем же идентификатором. ID означает, что что-то уникально, и только один элемент может иметь этот specyfic id. Я предполагаю, что вы должны сделать класс для этих кнопок и изменить свой код сценария, имея это в виду. Вот что я предлагаю. Надеюсь, поможет.

<?php $count = 1; foreach ($settings[$slug] as $slug): ?> 
<div data-toggle="buttons-radio" class="btn-group"> 
    <button value="1" class="btn btn-success active enable" type="button"    name="includeicon"><i class="icon-ok icon-white"></i></button> 
    <button value="0" class="btn disable" type="button" name="includeicon"><i class="icon-remove"></i></button> 
</div> 
<?php endforeach; ?> 

$(document).ready(function(){ 

$(".enable").click(function(event) { 
var slugid = $('#slugid').val(); 
$.ajax({ 
     url: SITE_URL + 'admin/xervPluginConf/enable/?'+slugid, 
    type: "POST", 
    data : {'slugid' : slugid}, 
    success: function(data) { 
       } 
      }); 
}); 

$(".disable").click(function(event) { 
var slugid = $('#slugid').val(); 
$.ajax({ 
    url: SITE_URL + 'admin/xervPluginConf/disable/?'+slugid, 
    type: "POST", 
    data : {'slugid' : slugid}, 
    success: function(data) { 
       } 
}); 
}); 
    });