0

我想从一系列href中获取id ...我得到了我正在寻找的答案-但是它们在我现有代码的上下文中不起作用-

下面有两个功能-“删除确认”和“编辑对话框调用”都可以在 jsFiddle http://jsfiddle.net/RK4Ye/中工作-但是我的链接是通过 jQuery 生成的（不是硬编码的），当我按原样运行页面时，这两个功能停止工作......我不知道原因是什么......但我已经删除了所有其他 js，这些都不起作用......其他信息 - 页面运行为jQueryUI 选项卡中的一个选项卡...

帮助PLZ ..我什至不知道如何找到问题，所有代码在添加这两个功能之前都可以工作......并且没有抛出错误......

问题：是编辑链接和删除链接都带你到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 回答