Question

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

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

HELP PLZ ..我甚至不知道如何找到问题，所有代码在添加这两个功能之前都有效... 没有错误被抛出......

问题：是编辑链接和删除链接都带你到href，类选择器没有捕获click事件并停止请求...（我意识到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":"" } ] }

Answer 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

jQuery奇怪 - 影响类选择器可操作性的代码

1 个答案: