Question

按下按钮时，两个脚本都可以独立工作。但是，当我尝试按下其中一个删除按钮时，这两个按钮都摆脱了。我已经将代码分隔为类，因此只能删除函数内的相应部分。.我在做什么错了？

$('.ddd').on('click', myFunction1);
$('body').on('click', '.remove', function() {
  $('#demo1').empty();
});


$('.eee').on('click', myFunction2);
$('body').on('click', '.remove', function() {
  $('#demo2').empty();
});

function myFunction1() {
  var demo1 = $('#demo1');

  if (!demo1.html().length) {
    demo1.html('<div id="formwrap2" class="ddd" name="ddd"><div id="ddd"><div id="driverinfo">Home Info<button type="button" name="remove"  id="test2" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">Remove Home</span></button></div>test1</div>');
  }
}

function myFunction2() {
  var demo2 = $('#demo2');

  if (!demo2.html().length) {
    demo2.html('<div id="formwrap2" class="eee" name="test"><div id="eee"><div id="driverinfo">Renters Info<button type="button" name="remove"  id="test2" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">Remove Renters</span></button></div>test2</div>');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" name="ddd" id="test1" class="ddd"><span class="glyphicon glyphicon-plus">Add Home</span></button>
<p id="demo1"></p>

<hr>

<button type="button" name="eee" id="test2" class="eee"><span class="glyphicon glyphicon-plus">Add RENTERS</span></button>
<p id="demo2"></p>

Answer 1

这是您的代码的作用：

$('.ddd').on('click', myFunction1);
/* 1. When `.ddd` is clicked, execute myFunction1() */

$('body').on('click', '.remove', function() {
  $('#demo1').empty();
});
/* 2. Any click inside `<body>` done on 
 * an element with class="remove", should empty `#demo1` 
 */

$('.eee').on('click', myFunction2);
/* 3.  When `.eee` is clicked, execute myFunction2() */

$('body').on('click', '.remove', function() {
  $('#demo2').empty();
});
/* 4. Any click inside `<body>` done on 
 * an element with class="remove", should empty `#demo2` 
 */

如果您考虑注释2和4，则您会发现，如果单击<body>（如果元素为class="remove"的话）将同时清空#demo1和{{1} }元素。

让我们用一个清空最接近的#demo2元素的单个函数替换2和4。如果这在您的实际应用中没有意义，请为此使用一个自定义类（例如：<p>-将该类添加到您要在点击时清空的.to-be-emptied父对象中）。

<button>

看到它正常工作：

$('body').on('click', '.remove', function() {
  $(this).closest('p').empty();
});

$('.ddd').on('click', myFunction1);
$('.eee').on('click', myFunction2);

$('body').on('click', '.remove', function() {
  $(this).closest('p').empty();
});

function myFunction1() {
  var demo1 = $('#demo1');

  if (!demo1.html().length) {
    demo1.html('<div id="formwrap2" class="ddd" name="ddd"><div id="ddd"><div id="driverinfo">Home Info<button type="button" name="remove"  id="test2" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">Remove Home</span></button></div>test1</div>');
  }
}

function myFunction2() {
  var demo2 = $('#demo2');

  if (!demo2.html().length) {
    demo2.html('<div id="formwrap2" class="eee" name="test"><div id="eee"><div id="driverinfo">Renters Info<button type="button" name="remove"  id="test2" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">Remove Renters</span></button></div>test2</div>');
  }
}

当前代码的另一个问题是它允许页面中的ID重复（<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" name="ddd" id="test1" class="ddd"><span class="glyphicon glyphicon-plus">Add Home</span></button> <p id="demo1"></p> <hr> <button type="button" name="eee" id="test2" class="eee"><span class="glyphicon glyphicon-plus">Add RENTERS</span></button> <p id="demo2"></p>，formwrap2，...）
我不能足够强调这会对您的健康有害。在严重的情况下，它会导致自我脱发。

脚本不会单独删除

1 个答案: