Question

当我用ajax更改页面内容时，我的功能停止工作。这是我的脚本：

let originalImage = UIImage(named: "original-image")!
let roundedImage = ImageTools.imageWithRoundedCornerSize(60, usingImage: originalImage)

// Set `UIImage` for your `WKInterfaceImage`
imageOutlet.setImage(roundedImage)

这是我的基本内容：

$function(){
    $( 'input[name="formtype"]:radio' ).change(
        function(){
            var formtype = $('input[name=formtype]:checked').val();
            $.ajax({
                url: '/changeform.php',
                method: 'post',
                data: {"type": formtype},
                success: function (data) {
                    $(form).html(data);
                }
            })
       }
    );

    $('input[name="set_address"]').on('change', function () {
        $('input[name="university"]').prop('disabled',false);
        $('input[name="school"]').prop('disabled',false);
    }
}

当“formtype”发生变化时，ajax会返回此表单的内容：

<body>
    <input type="radio" name="formtype" value="1" checked>
    <input type="radio" name="formtype" value="2">

    <form method="post" action="action.php">
       <input type="checkbox" name="set_address" checked>
       <input type="text" name="university" disabled>
    </form>
</body>

现在，当我取消选中“set_address”复选框时，学校输入不会激活。我怎么解决呢？

Answer 1

目前您使用的是＆＃34; direct＆＃34;绑定，它只会附加到代码进行事件绑定调用时页面上存在的元素。

在动态生成元素或操作选择器（如删除和添加类）或替换元素时，您需要使用Event Delegation委托事件方法.on()。

即

$(parentStaticContainer).on('event','selector',callback_function)

实施例

$('form').on('change', 'input[name="set_address"]', function(){
    //Your code
});

Answer 2

更换<input type="checkbox" name="set_address" checked>后，您将丢失附加到其上的事件处理函数。

相反，委托你的事件处理程序：

$('form').on('change', 'input[name="set_address"]', function () {
    $('input[name="university"]').prop('disabled',false);
    $('input[name="school"]').prop('disabled',false);
}

Answer 3

使用委托

$(document.body).on("change",'input[name="set_address"]', function () {

通过ajax更改内容后，javascript无法正常工作

3 个答案: