0

一連の hrefs から ID を取得したかったのですが...探していた答えが得られましたが、既存のコードのコンテキストでは機能しません -

以下に2つの機能があります-「削除確認」と「ダイアログ呼び出しの編集」の両方がjsFiddle http://jsfiddle.net/RK4Ye/で機能します-しかし、私のリンクはjQuery(ハードコードされていない)を介して生成され、ページをそのまま実行すると、これらの 2 つの機能が機能しなくなりました....原因はわかりません...しかし、他のすべての js を削除しましたが、これらは機能しません...その他の情報 - ページは次のように実行されますjQueryUI タブのタブ...

HELP PLZ ..問題を見つける方法さえわかりません.これら2つの機能を追加する前にすべてのコードが機能します...そしてエラーはスローされません....

問題:編集リンクと削除リンクの両方がhrefに移動し、クラスセレクターがクリックイベントをキャッチせず、リクエストを停止することです...(ajax呼び出しにより、動作を完全に複製することが不可能になることに気づきました- しかし、それが戻ってきて適切に機能しているという私の言葉を信じてください - しかし、念のために JSON パケットを含めます)

$( function() {

function loadTable() {
    $.ajax({
        type: 'POST',   
        url: 'list.php',    
        dataType: 'json',   
        success: function ( data ) {                
            var items = [];
            var line = 1;

            // clear the table
            $( '#companies-list' ).html( '' );


            // the real data
            $.each( data.companies, function ( key, value ) {   
                var thisRowClass = 'odd';
                if ( line % 2 ) {
                    thisRowClass = 'even';
                }
                items.push( '<tr class="' + thisRowClass + '"><td nowrap>'  + value.company + 
                            '</td><td>' + value.address + 
                            '</td><td>' + value.city + 
                            '</td><td>' + value.state + 
                            '</td><td>' + value.zip + 
                            '</td><td nowrap>' + value.phone + 
                            '</td><td>' + value.contact + 
                            '</td><td>' + value.email + 
                            '</td><td>' + value.jobscurrent + 
                            '</td><td>' + value.jobsdone + 
                            '</td><td nowrap> <a href="m/company.php"  data-identity="' + value.id + '" class="uLink">edit</a> |  <a href="m/company.php?d=' + value.id + '" class="dLink">delete</a> ' +
                            '</td></tr>' ); 
                line++ ;
            }); 

            $( '#companies-list' ).append( items.join( '' ) );                                 

        },

        error: function () {    
            // there's an error
            $( '#message' ).html( '<p>There was a problem on the server... </p>' ); 
        }
    });
}


// pre load my list when page loads
loadTable();



// DELETE CONFIRM
$( '.dLink' ).click( function( event ) {
    var response = confirm( 'Are you sure you want to delete this item?' );
    //the following is the tertiary version of: if (response) { return true; } else { return false; }
    return( response ) ? true : false;
});


// EDIT DIALOG CALL     
$( '.uLink' ).click( function() {
    var id = $( this ).data( 'identity' );
    alert( id );

    return false;
});

});

HTMLは次のようになります

<div id="companies-container" class="ui-widget">
<h3>List of Companies</h3>
<table id="companies" class="ui-widget ui-widget-content list"> 
<thead>
    <tr class="ui-widget-header ">
        <th>Company</th>
        <th>Address</th>
        <th>City</th>       
        <th>State</th>
        <th>Zip</th>
        <th>Phone</th>
        <th>Contact</th>
        <th>Email</th>      
        <th>Jobs Current</th>
        <th>Jobs Done</th>
        <th>&nbsp;</th>
    </tr>
</thead>

<tbody id="companies-list"> 
</tbody>

<tfoot> 
</tfoot>
</table>
</div>

サンプルの JSON パケット:

{ "count": "3", "companies": [{ "id":"2", "company":"Main Customer A", "address":"1234 street ", "city":"Gallatin", "state":"TN", "zip":"30766", "phone":"", "contact":"", "email":"", "jobscurrent":"", "jobsdone":"" },{ "id":"3", "company":"Sub Customer B", "address":"232 road ", "city":"Galatan ", "state":"TN", "zip":"60766", "phone":"", "contact":"", "email":"", "jobscurrent":"", "jobsdone":"" },{ "id":"4", "company":"Sub Customer C", "address":"333 pkwy ", "city":"Nashville", "state":"TN", "zip":"37204", "phone":"", "contact":"", "email":"", "jobscurrent":"", "jobsdone":"" } ] }
4

1 に答える 1

1

on()コードの実行後に DOM に追加された要素を考慮して、クリック ハンドラーを委任する必要があります。

テーブルが永続的な資産であると仮定すると、テーブルに委譲できます。

$('#companies').on('click', '.dLink' , function( event ) {
    var response = confirm( 'Are you sure you want to delete this item?' );
    //the following is the tertiary version of: if (response) { return true; } else { return false; }
    return( response ) ? true : false;
});

API リファレンス: http://api.jquery.com/on

于 2013-01-26T00:08:25.123 に答える