Question

我点击它时会有一个锚点，它会触发带有ajax调用的click函数。但是，当我单击一次并且它更改为样式时，不会触发第二个click事件。

$(".makepartner").on('click', function (e) {
    $('span', this).removeClass('label-danger').addClass('label-success').html('Партньор');
    $.post('/ajax/partner', { 
        'type': 'makepartner', 
        'id': $(this).parent().find('input[name="id"]').val() 
    });
    e.preventDefault();
});

$(".removepartner").on('click', function (e) {
    $('span', this).removeClass('label-success').addClass('label-danger').html('Не');
    $.post('/ajax/partner', { 
        'type': 'removepartner', 
        'id': $(this).parent().find('input[name="id"]').val() 
    });
    e.preventDefault();
});

这是HTML：

<? if($hospital['paid'] > 0 ):?>
<input type="hidden" name="id" value="<?=$hospital['hospital_id'];?>" />
<a href='#' id='removepartner_<?=$hospital['id']?>' class='removepartner'>
    <span class="label label-sm label-success">Partner</span>
</a>
<? else: ?>
<input type="hidden" name="id" value="<?=$hospital['hospital_id'];?>" />
<a href='#' id='makepartner_<?=$hospital['id']?>' class='makepartner'>
    <span class="label label-sm label-danger">Not a partner</span>
</a>
<? endif; ?>

Answer 1

像$('.makepartner')这样的jQuery表达式只搜索一次类'makepartner'的DOM元素。如果您将具有相同类的其他元素添加到文档中，则需要重新评估它。

如果你需要动态更改锚的类并仍然处理事件，你可以写这样的东西：

<div class="anchor-wrapper">
   <a class="makepartner">Anchor content</a>
</div>

并将处理程序附加到'.anchor-wrapper'：

$('.anchor-wrapper').on('click', '.makepartner', function (e) {
    //do work...
});

$('.anchor-wrapper').on('click', '.removepartner', function (e) {
    //do work...
});

Answer 2

您可以使用数据属性http://jsfiddle.net/6fevy/

对1个元素执行此操作

HTML

<a href='#' class='togglepartner' data-id="someid" data-type="removepartner">
    <span class="label label-sm label-success">Partner</span>
</a>

JS

$('.togglepartner').click(function(ev){
    var $this = $(this), 
        data = $this.data();
    $this.find('span')
         .toggleClass("label-success label-danger")
         .text({
             removepartner: 'Not partner',
             makepartner: 'Patner'
         }[data.type]).end()
         .data("type", {
             removepartner: 'makepartner', 
             makepartner: 'removepartner'}[data.type]);
    //send ajax;
    //$.post('/ajax/partner', data);

   ev.preventDefault(); 
})

Answer 3

使用以下脚本我们可以使用单个函数执行它。

 $(document).on('click','.makepartner,.removepartner',comman_function);


 function comman_function(e){
     e.preventDefault();
     var anchorclass = $(this).attr('class');
     if(anchorclass == 'makepartner'){
        $('span', this).removeClass('label-danger').addClass('label-success').html('Партньор');
      }else{
        $('span', this).removeClass('label-success').addClass('label-danger').html('Не');
     }
     $.post('/ajax/partner', { 
        'type': anchorclass, 
        'id': $(this).parent().find('input[name="id"]').val() 
     },function(data){
      //ajax response data in return
     });

}

jQuery更改锚类并再次触发单击

3 个答案: