javascript - 第二次未触发弹窗

Question

我为每个 View 创建了一个单独的弹出窗口，并且它是第一次工作。当我第一次单击文本时，会出现弹出窗口。 但是，当我第二次单击相同的文本时，弹出窗口不会出现。如何在每次点击时打开弹出窗口？

jQuery(document).ready(function($) {
$("body").on('click','.popup-trigger',function(e)
{
	
// 	$(this).after( $(this).nextAll('#popup:first') );
// $(this).nextAll('#popup:first').appendTo("body").modal('show');
 console.log('clicked popup');
 e.stopPropagation();
  if(jQuery(window).width() < 767) {
    $(this).after( $(this).nextAll('#popup:first') );
    $(this).nextAll('#popup:first').appendTo('body').modal('show');
  } else {
  //  $('#popup').hide();
    $(this).nextAll('#popup:first').appendTo('body').modal('show');   
  }; 
  
});
});

You can run the code in here to check my problem:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">
    <a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center"><div class="field-content"></div><div class="field-content">tEST1</div></div></a>
	<div class="modal fade" id="popup" role="dialog" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
        <div class="modal-body" id="popup-content">
         <div class="field-content"><p>Hello..test1</p>
          </div>     
		  </div>
        <div class="modal-footer">
          </div>
      </div>
   </div>
  </div>
 </div>
  <div class="views-row views-row-2 views-row-even">
    <a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">tEST2</div></div></a>
	<div class="modal fade" id="popup" role="dialog" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
        <div class="modal-body" id="popup-content">
         <div class="field-content"><p>Hello..test2 </p>
          </div>     
		  </div>
        <div class="modal-footer">
          </div>
      </div>
   </div>
  </div>
</div>
  <div class="views-row views-row-3 views-row-odd">
    <a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">Test3</div></div></a>
	  <div class="modal fade" id="popup" role="dialog" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
        <div class="modal-body" id="popup-content">
         <div class="field-content"><p>Hello..test3 </p>
          </div>     
		  </div>
        <div class="modal-footer">
          </div>
      </div>
   </div>
  </div>
</div>

 </div>
 
  
  

Answer 1

你可以这样做

1. 您已经定位了 id 。不需要调用 dom modal('show')。但是所有目标 id 都是相同的。因此添加单独的 id 对于每个模式和受尊重的目标按钮。就像popup1，popup2...
2. 目标模式自动弹出。这是 bootstrap 的默认行为
3. 并且不需要appendTo('body')。因为它已经在 body 中可用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="view-content">
  <div class="views-row views-row-1 views-row-odd views-row-first">
    <a class="popup-trigger" data-toggle="modal" data-target="#popup">
      <div class="col-md-3 col-sm-3 text-center">
        <div class="field-content"></div>
        <div class="field-content">tEST1</div>
      </div>
    </a>
    <div class="modal fade" id="popup" role="dialog" style="display: none;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
          </div>
          <div class="modal-body" id="popup-content">
            <div class="field-content">
              <p>Hello..test1</p>
            </div>
          </div>
          <div class="modal-footer">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-2 views-row-even">
    <a class="popup-trigger" data-toggle="modal" data-target="#popup2">
      <div class="col-md-3 col-sm-3 text-center">
        <div class="field-content"></div>
        <div class="field-content">tEST2</div>
      </div>
    </a>
    <div class="modal fade" id="popup2" role="dialog" style="display: none;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
          </div>
          <div class="modal-body" id="popup-content">
            <div class="field-content">
              <p>Hello..test2 </p>
            </div>
          </div>
          <div class="modal-footer">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="views-row views-row-3 views-row-odd">
    <a class="popup-trigger" data-toggle="modal" data-target="#popup3">
      <div class="col-md-3 col-sm-3 text-center">
        <div class="field-content"></div>
        <div class="field-content">Test3</div>
      </div>
    </a>
    <div class="modal fade" id="popup3" role="dialog" style="display: none;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
          </div>
          <div class="modal-body" id="popup-content">
            <div class="field-content">
              <p>Hello..test3 </p>
            </div>
          </div>
          <div class="modal-footer">
          </div>
        </div>
      </div>
    </div>
  </div>

</div>