Question

最终编辑：我用.trigger（'click'）替换.change（）时解决了这个问题。效果很好。

全部谢谢

最后编辑：
我试图在Jsfiddle上重现这个问题，但它完美无缺：https://jsfiddle.net/a8e0fmn0/9/

编辑：（请参阅新代码）我已经使用Number发出一些警告，当我执行时，结果是：

当我点击#idModalCheckbox：1-2-3-3

当我点击#idCheckbox：3

时

结束编辑

-

我有2.change函数，第一个更改第二个，第二个生成ajax请求。

mycode.js：

$(document).ready(function(){
        $('#modalCheckBox').on('change', '#idModalCheckbox', function(){
alert('1');
    var id = $(this).parents('#id');
                    $('#idList li').each(function() {
                        if($(this).children('#id').html() == id) {
alert('2');
    //loop to find the right row
                            item = $(this).find('#idListCheckBox').prop('checked', true).change();
                        }
                    });
                });

        $('#idCheckBox').change(function(){
alert('3');
            var oPost = {
                "1": a,
                "2": b,
                "3": c};
    //oPost get data from the $(this) row 






        console.log(oPost);
        $.ajax(
            {
                url : "http://" + d + e + f,
                data : oPost,
                type : 'post',
                dataType : 'json',
                success : function(jsonCallback)
                {
                    console.log(jsonCallback);
                }
            });
        });
});

然后在我的控制台中，当我点击'#idModalCheckbox'时，我的帖子是我的2倍，JsonCallback的2倍，当我点击'#idCheckBox'时我只有一次

my.html（在php中循环生成，我的idCheckbox在哪里）

<li>
    <span hidden id="id"><?=id;?></span>

    <span>
          <input id="idCheckBox" name="idCheckBox" <?= $checked == true ? 'checked': '';?> data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-width="60" data-size="small" type="checkbox" data-on="on" data-off="off"/>
   </span>
</li>

my2.html（modal）（在循环中使用php生成）

<tr>
    <td>
        <input id="modalCheckBox" name="modalCheckBox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-width="60" data-size="small" type="checkbox" data-on="on" data-off="off"/>


    </td>
</tr>

感谢您的帮助

Answer 1

您的HTML似乎包含一些问题

在第一个代码块中

<li>
    <span hidden id="id"><?=id;?></span>

    <span>
          <input id="idCheckBox" name="idCheckBox" <?= $checked == true ? 'checked': '';?> data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-width="60" data-size="small" type="checkbox" data-on="on" data-off="off"/>
   </span>
   </span><!-- This tag doesn't have a matching opening tag -->
</li>

最后一个</span>标签是孤儿

在第二个代码段中

<tr>
    <td> <!--                           below here, double quote -->
        <input id="modalCheckBox" name=""modalCheckBox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-width="60" data-size="small" type="checkbox" data-on="on" data-off="off"/>

    </td>
</tr>

在name属性之后，您有双引号，这会弄乱您的HTML

在您的JavaScript中，a，b，c，d，e，f变量来自何处？如果它们是全局变量，则应使用window.a使其明确并避免冲突

我没有看到任何双重调用，这意味着我无法重现您的错误。尝试修复您的HTML（无论您使用什么IDE，都应该有办法让您知道HTML何时无效）

你能提供一个像下面那个可以复制bug的工作代码片段吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
    <span id="id">2</span>

    <span>
          <input id="idCheckBox" name="idCheckBox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-width="60" data-size="small" type="checkbox" data-on="on" data-off="off"/>
   </span>
   </span>
</li>
</ul>
<table>
<tr>
    <td>
        <input id="modalCheckBox" name=""modalCheckBox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-width="60" data-size="small" type="checkbox" data-on="on" data-off="off"/>


    </td>
</tr>
</table>

在下面的示例中，您的代码已清理并适应不需要未知的JavaScript变量，我看不到任何双重调用

＆＃13;

$(document).ready(function()
{
    $('#modalCheckBox').on('change', '#idModalCheckbox', function()
    {
        var id = $(this).parents('#id');
        $('#idList li').each(function()
        {
            if($(this).children('#id').html() == id) 
            {
                //loop to find the right row
                item = $(this).find('#idListCheckBox').prop('checked', true).change();
            }
        });
    });

    $('#idCheckBox').change(function()
    {
        var oPost = 
        {
            "1": 11,
            "2": 12,
            "3": 13
        };
            //oPost get data from the $(this) row 

        console.log(oPost);
        $.ajax(
        {
            url : "http://",
            data : oPost,
            type : 'post',
            dataType : 'json',
            success : function(jsonCallback)
            {
                console.log(jsonCallback);
            }
        });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
      <span id="id">2</span>

      <span>
        <input id="idCheckBox" name="idCheckBox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-width="60" data-size="small" type="checkbox" data-on="on" data-off="off"/>
      </span>
  </li>
</ul>
<tr>
    <td>
        <input id="modalCheckBox" name="modalCheckBox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-width="60" data-size="small" type="checkbox" data-on="on" data-off="off"/>


    </td>
</tr>

＆＃13;

Answer 2

您要么将事件绑定两次，要么将其绑定到两个都具有该ID的元素。

Answer 3

您正在通过html创建php loop，并且您的代码似乎html使用相同的html elements创建id's，但id应该是独特。

我认为，请更正您的HTML代码。

change（）事件在jquery中调用两次

3 个答案: