Jquery属性未在新事件上清除

时间:2017-05-03 16:07:54

标签: jquery twitter-bootstrap

我希望在点击特定链接时显示模式,然后在隐藏时我想要打开它的点击属性。以下代码在第一次单击时完美运行,但之后它还返回先前单击的属性。

$('body').on('click',function(e) {
  var $target= e.target;
  $('#my_modal').modal('show');
  $('#my_modal').on('hidden.bs.modal', function (e) {
    alert($target.getAttribute('data-my-id'));
  })
});

Here is the fiddle demonstrating this.

如何才返回当前点击事件?

2 个答案:

答案 0 :(得分:2)

更改$('#my_modal').on('hidden.bs.modal', function (e) {

$('#my_modal').one('hidden.bs.modal', function (e) {

(即ONE而不是ON)。

这将在处理程序运行后取消绑定,这样每当click事件创建新的处理程序时,过去的处理程序将不再存在以进行额外的函数调用。 http://api.jquery.com/one/

答案 1 :(得分:0)

您还可以尝试将属性值添加到模态,并在模态关闭事件上显示时使用它。请参阅以下代码

<a href="#" class="btnlink" data-my-id="101"> Link 101</a><br/>
<a href="#"  class="btnlink" data-my-id="102"> Link 102</a><br/>
<a href="#"  class="btnlink" data-my-id="103"> Link 103</a><br/>

        <!-- modals -->
        <div id="my_modal" class="modal fade" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Test Me</h4>
              </di class="btnlink" v>
              <div class="modal-body" id="linkval" data-attr="">
                <p>
            This is only a test.
            </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
                      </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

 $('.btnlink').on('click',function(e) {
  var $target= e.target;
  $('#my_modal').modal('show');
  $('#linkval').attr('data-attr',$target.getAttribute('data-my-id'));
 });

    $('#my_modal').on('hidden.bs.modal', function (e) {
      alert($('#linkval').attr('data-attr'));
      $('#linkval').attr('data-attr','');
    });