0

下面的代码只是通过 Ajax 提交一个表单，并将 addNewUser.php 脚本的结果附加到一个小的弹出窗口中。

//activate the signup submit button
$('#button_signup_submit').click(function() {

    document.getElementById("popup_signup").style.display = "none";
    document.getElementById("popup_signup_step_two").style.display = "block";
    //submit the form info via ajax to addNewUser.php
    $.ajax({
         type: "POST",
         url: "ajax/addNewUser.php",
         data: { 
            username: document.forms["form_signup"]["username"].value,
            password: document.forms["form_signup"]["password"].value
         },
         datatype: "html",
         success: function(data){

                    var jqObj = jQuery(data);
                    $('#popup_signup_step_two').append(jqObj)
                }
    });

});

我可以得到上面的脚本将 ajaxed html 附加到原始网页中没有问题......但是当我去使用我的第二段代码时：

//activate the second signup page's return button
$('#return_to_signup_form_from_ajax_popup').click(function() {
    alert("HEY");
    //erase innerHtml of popup_signup_step_two
    document.getElementById("popup_signup_step_two").innerHTML = "";
    document.getElementById("popup_signup_step_two").style.display = "none";

    //show the original signup form again, should contain user's original values
    document.getElementById("popup_background").style.display = "block";
    document.getElementById("popup_login").style.display = "block";

});

...这是一个与新添加的 html 一起使用的 jQuery 片段...没有任何反应。当用户忘记输入用户名或密码并通过 ajax 向他们提供此消息时，第二段代码适用：

<p>Go <span id="return_to_signup_form_from_ajax_popup">back</span> and enter a username and password.</p>

我认为这一切都与 DOM 有关吗？但最终我不知道。如果有人能指出我要寻找什么的方向，我将不胜感激。

4

3 回答 3

2

如果您的$('#return_to_signup_form_from_ajax_popup')点击处理程序绑定在 document.ready 上，您将需要改用事件委托。事件委托用于将事件绑定到当前和未来的元素。

有关事件委托的更多信息，请参阅http://api.jquery.com/on/和http://api.jquery.com/category/deferred-object/。

于 2012-05-03T22:36:11.850 回答
1

好吧，只要您确定响应会返回正确的 html - 您应该没问题。我建议将您的点击处理程序更改为委托处理程序 - 然后您不必担心它是在将 ajax'd html 添加到实时 dom 之前还是之后初始化的。

编辑：更新为使用最新的 jqueryon方法。(http://api.jquery.com/on/)

$('#containerElementThatAjaxdDataWillGoInto').on('click','#return_to_signup_form_from_ajax_popup', clickHandler );

编辑：这是进一步澄清的尝试。

您在新的 html 中进行 ajaxing，并将其附加到#popup_signup_step_two. 惊人的。所以这个新的 html 也有一个按钮，需要有一个与之关联的处理程序。为此，我们需要委托一个事件处理程序，#popup_signup_step_two以便我们可以在该 dom 元素内监听我们想要的任何元素的所有点击。

$('#popup_signup_step_two').on('click', '#return_to_signup_form_from_ajax_popup', function() {
    // do stuff here
});

现在您已经完成了这个设置（在文档中准备好了），对其中元素的任何点击#return_to_signup_form_from_ajax_popup都#popup_signup_step_two将调用您的点击处理函数。现在在您当前的点击处理程序中，您设置#popup_signup_step_two为display = none. 因此，如果您想再次执行该操作，您需要确保将元素设置为display block.

我希望这会有所帮助，如果我们仍然在某个地方想念彼此，现在是时候开始将东西放入jsfiddle或提供链接了。

于 2012-05-03T22:35:50.353 回答
0

而不是使用 $.ajax() 使用 $('#popup_signup_step_two').load()

检查here以获取有关方法的参考

于 2012-05-03T22:35:49.960 回答