Question

我有一个带有表单的colorbox模态窗口。如果我点击发布一个ajax请求的表单，它发送数据，然后返回新的html覆盖模态html。

我得到了完全相同的“添加”代码，只有一些细微差别用于编辑（编辑发送id）。这一切都在视觉上正常工作并且数据被保存等，但是在编辑和添加的页面上都是一个脚本标记，用于突出显示具有验证错误的输入字段。添加它的工作，但编辑它不会触发脚本标记中的js代码，它几乎就像脚本标记不存在，我可以在html中用firebug看到它。我可以将代码复制到控制台并运行它，它的工作原理。没有错误。我尝试用一个简单的console.log（）替换代码但是也没有触发。

有一件事是，如果我使用jQuery 1.8它可以工作，但它与jQuery 1.10它没有，但我已经逐步完成所有代码，我看不到任何错误加上香港专业教育学院使用迁移插件运行它，我点击按钮时什么都看不见用于编辑项目。

关于它为什么不触发js的任何想法？

以下是代码：

ajax请求：

 $.ajax({
                    type:ajaxType,
                    url:url,
                    data:$("#addEditAddressForm").serialize(),
                    success:function (response) {
                        if (ajaxType == "POST") {
                            $("#colorbox .content").html(response);
                            $("#selectedAddress").show();
                            if ($(response).find(".globalAlert").hasClass('grey')) {
                                $('.addAddressSection').removeClass('noDisplay');
                                $('.addressList, .buttonsContainer').hide();
                            }
                            else {
                                $('.addAddressSection').addClass('noDisplay');
                                $('.addressList, .buttonsContainer').show();
                            }
                        } else {
                            $("#colorbox .content").html(response);
                            $('.addAddressSection').removeClass('noDisplay');
                            if ($('.addEditAddressForm').hasClass('noDisplay')) {
                                $('.addressList, .buttonsContainer').show();
                            }
                            else {
                                $('.addressList, .buttonsContainer').hide();
                            }
                        }
                        $.colorbox.resize();

                    }
                });

Ajax工作正常

这是html：

<div class="addEditContactSection noDisplay">
    #if($!editMode)
        <h2>Edit Contact</h2>
    #else
        <h2>Add Contact</h2>
    #end
    #errorMessages($errors)
    <form accept-charset="UTF-8"  action="addContact" method="post" id="addEditContactForm">
        <input type="hidden" value="$!contact.id" name="id" id="id" />
        <input type="hidden" value="$!custId" name="custId" id="custId" />
        <fieldset class="internal">
            #if($!editMode)
                <legend>$!contact.firstName $!contact.lastName</legend>
            #else
                <legend>Contact Details</legend>
            #end
            <dl>
                <dt class="clear">
                    <label for="firstName">First Name*</label>
                </dt>
                <dd>
                    <input type="text" value="$!contact.firstName" name="firstName" id="firstName" maxlength="40"/>
                </dd>
                <dt class="clear">
                    <label for="lastName">Last Name*</label>
                </dt>
                <dd>
                    <input type="text" value="$!contact.lastName" name="lastName" id="lastName" maxlength="40"/>
                </dd>
                <dt class="clear">
                    <label for="email">Email*</label>
                </dt>
                <dd>
                    <input type="text" value="$!contact.email" name="email" id="email" maxlength="70"/>
                </dd>
                <dt class="clear">
                    <label for="telephone">Telephone*</label>
                </dt>
                <dd>
                    <input type="text" value="$!contact.telephone" name="telephone" id="telephone" />
                </dd>
                <dt class="clear">
                    <label for="mobileTelephone">Mobile Phone</label>
                </dt>
                <dd>
                    <input type="text" value="$!contact.mobileTelephone" name="mobileTelephone" id="mobileTelephone" />
                </dd>
            </dl>
            <div class="contactButtons">
               <input id="saveContact" type="submit" value="Save Contact" name="saveContact"  class="overLayContactLink submitButton #if($!editMode)editContact#else addContactNew #end submitFormLight"/>
            </div>

        </fieldset>
    </form>
</div>

这是页面上的脚本，适用于一个而不是另一个

$（document）.ready（function（）{ var errorFields =“$！fieldNames”; var i; var fieldsArr = errorFields.split（“，”）;
        for (i = 0; i <= fieldsArr.length - 1; i++) {
            $("#" + fieldsArr[i]).addClass("error");
            $("#" + fieldsArr[i]).parent().prev().children("label").addClass("labelError");
        }
    })
</script>

Answer 1

经过大量调试并逐字尝试所有内容，原因在于响应代码的放置位置。

我更改了这一行：

$("#colorbox .content").html(response);

是：

$("#showContactList").html(response);

它是相同的div，但使用它工作的id。我不是百分之百确定为什么这会使它工作，但它确实并且感谢上帝的好！我唯一想到的就是为什么我看这个是在某个阶段我看到了2个div与类.content所以也许它让js感到困惑但很有趣它如何与jQuery 1.8一起工作。

奇怪的jQuery / JavaScript错误触发脚本

1 个答案: