一連の hrefs から ID を取得したかったのですが...探していた答えが得られました - ただし、既存のコードのコンテキストでは機能しません -
「削除確認」と「編集ダイアログ呼び出し」の両方が jsFiddle http://jsfiddle.net/RK4Ye/で機能します - ただし、jQuery を介してリンクが生成された場合は機能しません....原因がわかりません.. .しかし、他のすべての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> </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":"" } ] }