Question

我有一些JQuery，当你点击“添加到购物篮”按钮（它真的是一个链接），第一次一切按预期工作但是第二次点击按钮，虽然产品被添加到购物篮（数据库）行增加了数量），服务器发送的响应被输出而不是JQuery在SUCCESS函数中“捕获”。

我不明白为什么会发生这种情况，对此有什么想法？

JQuery的

$(function() {
            $( '.button' ).click(function( e ) {
                e.preventDefault();

                var url = $( this ).children( 'a' ).attr( 'href' );

                var elem = $( this ); 
                var parent = $( this ).parent().parent(); 
                var html = parent.html(); alert( html );

                $.ajax({
                    type: 'get',
                    url: url,
                    data: '',
                    cache: false,
                    dataType: 'text',
                    beforeSend: function( rs ) {
                        parent.html( '<div class="basket-item item-border" style="width:896px;text-align:center;"><p class="para"><img src="/media/images/spinner.gif" />Please wait...</p></div>' );
                    },
                    success: function( rs ) {
                        parent.html( html );

                        if( rs = 'YES' ) {
                            alert( 'Okay' );
                        } else {
                            alert( 'Something went wrong' );
                        }
                    },
                    error: function( rs, err ) {
                        if( rs.status == 0 ) {
                            alert( '--- Offline' );
                        } else if( rs.status == 404 ) {
                            alert( '404 Not Found' );
                        } else if( rs.status == 501 ) {
                            alert( '501 Internal Error' );
                        } else if( err == 'timeout' ) {
                            alert( '--- Timeout' );
                        } else {
                            alert( '--- Unknown' );
                        }
                    }
                 });
            });
        });

这是JQuery工作的HTML的一部分

<div>
            <div class="basket-item item-border" style="width:512px;text-align:left;">
                <p class="para">

                    <img 
                        width="48" 
                        height="48" 
                        alt="Sample Soap Pack (&pound;3.99)" 
                        src="http://www.mj.local/media/images/products/generic/0929005236213037.jpg" />
                <a href="http://www.mj.local/products/sample-soap-pack/">Sample Soap Pack</a></p>
            </div>

            <div class="basket-item item-border"><p>3.99</p></div>
            <div class="basket-item item-border" style="width:256px;text-align:center;">
                <p class="button"><a href="http://www.mj.local/shop/add/sample-soap-pack/">
                    <span class="add">Add to Basket</span>

                </a></p>
            </div>
        </div>

父DIV的内容被替换为“Please wait ..”消息，然后按预期恢复，这样会改变JQuery的工作方式吗？我有另一个JQuery在交换HTML时工作正常，为什么现在用这个呢？

感谢。

Answer 1

这是因为成功后您将替换父级的html，您的 .button 将被替换，而新的.button将不会再点击已绑定的点击事件。

你可以使用live jQuery＆lt; 1.7：

来修复它

$(function() {
  $('.button').live('click', function() {
     //your function here
   });
});

或关于jquery＆gt; 1.7：

$(function() {
  $(document).on("click", ".button", function(){ });
});

Answer 2

您正在替换回调函数中的.button元素，以查找点击.button元素的AJAX请求以及删除.button元素时click个事件该元素的处理程序也被删除。我会使用事件委托，因此事件处理程序将影响当前DOM中的所有元素以及稍后添加的元素（例如通过AJAX调用）：

只需改变：

$( '.button' ).click(function( e ) {

要：

$(document).delegate('.button', 'click', function( e ) {

以下是.delegate()的文档：http://api.jquery.com/delegate

JQuery GET只是第一次工作，第二次我只是得到服务器响应......为什么？

2 个答案: