Jquery触发器触发了两次

时间:2014-09-17 18:21:30

标签: javascript jquery

我这里有fiddle,当我选择汽车时会触发两次。

这是我的代码

 $(document).on('change','.sellkop',function(){
    if ($("#rs").is(':checked')) {
             $("#text_container").after(price_option());
        $("#sellbuy").after(cars())  ;
        };
    if ($("#rk").is(':checked')) {
           $("#price_container").remove();
         $(".cars").remove();
           $("#licensenumber_c").hide();
           $(".toolimage").hide();
     };
});

$('#category_group').on('change', function() { // this is select options

  if ($(this).val() == 101) {
          $( ".sell" ).remove();
          $("#categories").after(saljkop());

          $("#underKategory").hide();
          $(".toolimage").show();
            $('.sellkop').trigger('change');

 }
 if ($(this).val() == 102) {
            $( ".sell" ).remove();
            $("#categories").after(saljkop());
             $("#text_container").after(price_option());
            $(".toolimage").hide();
            $("#underKategory").show();
              $('.sellkop').trigger('change');
  }

 });

为什么会这样?

当我选择汽车时,我得到了(修复,提供)按钮两次。

3 个答案:

答案 0 :(得分:1)

你有2个带'sellkop'类的元素,这就是它被解雇两次的原因。

(买入和卖出按钮都包含'sellkop'类。

答案 1 :(得分:0)

我找到了解决方法如何触发单选按钮:

改变了这个

  $('.sellkop').trigger('change');

   $('#sellbuy input[type="radio"]:checked').trigger('change');

fiddle,对于那些发现这个有用的人来说

答案 2 :(得分:0)

我找到了解决方案。     它的真实情况(变更)被触发了两次。

I have improved the checks in change using a flag. Also tweaked some of your lines to get your desired output.

Hope you achieved what you were asking for. :)

Working Fiddle : 
  http://jsfiddle.net/mayurRahul/2jaq6hnr/


**HTML**

<div id = "categories">
    <select name="category_group"  id="category_group"  > 
                <option value="0">choose category</option>              
                <option value='101' id='cat101'  > cars </option>       
                <option value='102' id='cat102'  > others </option>  
    </select>
</div>
<div id="underKategory" >sthis is subcategory</div>
<div id="toolimage1" class="toolimage">dddddd</div>
<div id="text_container" class="text_container">textttttt</div>


**JAVASCRIPT**

     function saljkop(){
var x = "<div class='sex sell' id='sellbuy' >\
        <label ><input id='rs' type='radio' class='radio sellkop' value='s' name='type' > Sell </label>\
        <label ><input id='rk' type='radio' class='radio sellkop' value='k' name='type'>buy</label>\
        </div>";
return x ;
}
function price_option(){
var x = '<div class="container" id = "price_container">\
        <div >\
        <label>\
    <input  class="price_option" name="price_opt" value="1" type="radio"> Fix </label>\
   <label  class="css-label">\
        <input  class="price_option" name="price_opt" value="2" type="radio"> offer </label>\
        </div>\
</div>';
return x ;
}
function cars(){
        var x = '<div class="cars" ><div id="licenscontainer" ><div id="licensenumber_c">\
<input id="licensenumber" placeholder="Registrer number" type="text" value="" >';
    return x;
}

 $(document).on('change','.sellkop',function(){
         var flag = false;
        if ($("#rs").is(':checked')) {
                 $("#text_container").after(price_option());
                $("#sellbuy").after(cars())  ;
                flag = true;
            };
        if ($("#rk").is(':checked')) {
               $("#price_container").remove();
               $(".cars").remove();
               $("#licensenumber_c").hide();
               $(".toolimage").hide();
               flag = true;
         };
     if(!flag){
             $("#rs").attr("checked","checked");
             console.log("no-das");
     }
    });

 $('#category_group').on('change', function() { // this is select options

    if ($(this).val() == 101) {
              $( ".sell,#price_container,#licenscontainer" ).remove();
              $("#categories").after(saljkop());

              $("#underKategory").hide();
              $(".toolimage").show();
              $('.sellkop').trigger('change');

    }
    if ($(this).val() == 102) {
                $( ".sell,#price_container,#licenscontainer" ).remove();
                $("#categories").after(saljkop());
                 $("#text_container").after(price_option());
                $(".toolimage").hide();
                $("#underKategory").show();
                  $('.sellkop').trigger('change');
    }

    ///............many other values continue
 });