php - JQuery GET 仅在第一次有效，第二次我只是得到服务器响应...为什么？

Question

我有一些 JQuery，当您单击“添加到购物篮”按钮(它实际上是一个链接)时，第一次一切都按预期工作，但是第二次单击该按钮，尽管产品已添加到购物篮(数据库row 增加了数量)，SUCCESS 函数中服务器发送的响应是输出的，而不是 JQuery“捕获”的。

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

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 的内容被替换为“请稍候..”消息，然后按预期恢复，那么这会改变 JQuery 的工作方式吗？我有另一个 JQuery 在交换 HTML 时工作正常，为什么现在用这个呢？

谢谢。

Answer 1

这是因为成功后，您将替换父级的 html，您的 .button 将被替换，并且新的 .button 将不再绑定(bind)点击事件。

您可以使用实时 jQuery <1.7 来修复它:

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

或者对于jquery>1.7:

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