如何在使用 jQuery 启动的模式中更新 -data-row 属性？答案

【问题标题】：How do I update the -data-row attribute inside a modal launched with jQuery?如何在使用 jQuery 启动的模式中更新 -data-row 属性？
【发布时间】：2016-10-19 03:18:22
【问题描述】：

我有一个这样启动的模式：

<a href="javascript:;" class="edit_item" data-row="6">
 <i class="icon-open"></i>
</a>

然后又会触发

$( document ).on( "click", ".edit_item", function() {

        var row=$(this).data("row");
        var params="myfile.php&link="+row;
        open_box_edit(params);
});

open_box_edit 只是：

function open_box_edit(params)
{        

      var URL=ajax_url+"/?"+params;
      var modal = $('#modal_edit');
        modal
            .find('.modal-body')
            .load(URL, function (responseText, textStatus) {
                if ( textStatus === 'success' || 
                     textStatus === 'notmodified') 
                {
                    modal.modal("show");
                }
        });  
}

在modal-body 内一切正常，但现在我已向该模态添加了一个modal-footer div，并且在该div 内是一个用于删除项目的链接，它与打开的模态具有相同的data-row 属性。基本上：

<div id="modal_edit" class="modal fade" 
     tabindex="-1" role="dialog" aria-labelledby="plan-info-edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <!-- CONTENT HERE -->
            </div>
            <div class="modal-footer">

            <!-- DELETE BUTTON -->
            <a href="javascript:;" class="delete_item" data-row="">
              <i class="icon-delete"></i>
            </a>
            <!-- DELETE BUTTON -->

            </div>
        </div>
    </div>
</div>

我该怎么做才能让<a href="javascript:;" class="delete_item" data-row=""> 本质上变成<a href="javascript:;" class="delete_item" data-row="6">？基本上我需要做的就是更新模式中 delete_item 类的数据行。

非常感谢任何提示！

更新 1：

我在想可能给open_box_edit 另一个参数（行），然后在函数中运行类似$('.delete_item').data('row', row); 的东西。但是如何定位特定的 div 和 modal-footer？

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

点击编辑项时更新数据属性。

$( document ).on( "click", ".edit_item", function() {
    var row=$(this).data("row");
    $('.delete_item').data("row",row); // add this line
    var params="myfile.php&link="+row;
    open_box_edit(params);
});

【讨论】：

这是一个完美的解决方案，并且立即奏效。谢谢！

【解决方案2】：

试试这个：

.load(URL, function (responseText, textStatus) {
                if ( textStatus === 'success' || 
                     textStatus === 'notmodified') 
                {
                    $('div.modal-footer > a.delete_item').data('row', param);
                    modal.modal("show");
                }

【讨论】：

【解决方案3】：

var val=6;
var footerDataRow=$(".modal-footer").find('a');
footerDataRow.data('data-row',val);

这一行就可以搞定，我已经剖析了，让你看懂。

【讨论】：