Question

我需要帮助才能使用jQuery找到动态元素

<button id="awe1" data-href="http://awesome1" data-toggle="modal" data-target="#RemConfirm" class="btn"><i class="fa fa-trash-o"></i> Remove</button>

<button id="awe2" data-href="http://awesome2" data-toggle="modal" data-target="#RemConfirm" class="btn"><i class="fa fa-trash-o"></i> Remove</button>

如果单击上面的按钮它将显示一个模态，你可以看到按钮有动态'data-href'，我需要获取此值并应用于模态按钮作为确认删除。我正在使用bootstrap模态，这是我的模态。

<div id="RemConfirm" class="modal modal-scroll fade" data-backdrop="static" data-keyboard="false" tabindex="-1">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
  </div>
  <div class="modal-body">
    <p>You are about to remove this item ?.</p>
    <p class="debug-url"></p> <!-- debug data-href -->
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn shadow default">Close</button>
    <a class="btn remove-confirm">Remove</a>
  </div>

jQuery的：

$('#RemConfirm').on('show.modalmanager', function(e) {
    $(this).find('.remove-confirm').attr('href', $(e.relatedTarget).data('href'));
    $('.debug-url').html('Delete URL: <strong>' + $(this).find('.remove-confirm').attr('href') + '</strong>');
});

Answer 1

我在这个小提琴中完成了它，但你的问题并不清楚。我不确定你的jQuery中有一半会重新执行：$(e.relatedTarget)和show.modalmanager，因为它没有定义。

以下示例基本上使用了HTML：

$('button').on('click', function(e) {
    $(this).find('.remove-confirm').attr('href', $(e.relatedTarget).data('href'));
    $('.debug-url').html('Delete URL: <strong>' + $(this).data('href') + '</strong>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="awe1" data-href="http://awesome1" data-toggle="modal" data-target="#RemConfirm" class="btn"><i class="fa fa-trash-o"></i> Remove</button>

<button id="awe2" data-href="http://awesome2" data-toggle="modal" data-target="#RemConfirm" class="btn"><i class="fa fa-trash-o"></i> Remove</button>

<div id="RemConfirm" class="modal modal-scroll fade" data-backdrop="static" data-keyboard="false" tabindex="-1">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
  </div>
  <div class="modal-body">
    <p>You are about to remove this item ?.</p>
    <p class="debug-url"></p> <!-- debug data-href -->
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn shadow default">Close</button>
    <a class="btn remove-confirm">Remove</a>
  </div>

Answer 2

通过在jQuery中调用我的模态

，我找到了一种简单的方法来实现这一目标

我的按钮：

<a href="http://awesome1" data-confirm="You are about to remove this item ?" class="btn"><i class="fa fa-trash-o"></i> Remove</a>

<a href="http://awesome2" data-confirm="You are about to remove this item ?" class="btn"><i class="fa fa-trash-o"></i> Remove</a>

和jQuery

$(document).ready(function() {
  $('a[data-confirm]').click(function(ev) {
    var href = $(this).attr('href');
    if (!$('#dataConfirmModal').length) {
      $('body').append('<div id="dataConfirmModal" class="modal modal-scroll fade" data-backdrop="static" data-keyboard="false" tabindex="-1"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button><h4 class="modal-title">Please Confirm</h4></div><div class="modal-body"></div><div class="modal-footer"><button type="button" data-dismiss="modal" class="btn shadow default">Close</button><a type="button" class="btn shadow red-sunglo" id="dataConfirmTrue">Remove</a></div></div>');
    } 
    $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
    $('#dataConfirmTrue').attr('href', href);
    $('#dataConfirmModal').modal({show:true});
    return false;
  });
});

感谢

查找动态id属性jQuery

2 个答案: