.replaceWith 无法使用 .click 函数加载另一个值

.replaceWith can't load another value using .click function

本文关键字：函数 加载 另一个 click replaceWith      更新时间：2023-09-26

我有两个.on('click')函数(#addBooksId，#addCategoryId(当我尝试单击文档对象模型中的一个函数时，它使用.replaceWith替换新值，但是当我尝试单击文档对象模型中的另一个函数时，它不会替换新值。如何在不刷新浏览器的情况下执行此操作？而不是单击其中一个函数并再次刷新我的浏览器(重复(每次单击函数时我想做什么，它都会同时更改值。这是我下面的代码。

$(document).on("click","#addBooksId",function() {
        $.get('addBooks.html', function(data) 
            {     //The current page
            $('#form').replaceWith(data); // Receive with value
            alert('This is add books section');
            });
    });
    $(document).on("click","#addCategoryId",function() {
        $.get('addCategory.html', function(data) 
            {     //The current page
            $('#form').replaceWith(data); // Receive with value
            alert('This is add category section');
            });
    });

主.html

< script type = "text/javascript"
src = "https://code.jquery.com/jquery-1.12.3.min.js" >
  < /script>
 
$(document).on("click", "#addBooksId", function() {
      $.get('addBooks.html', function(data) { / / The current page
$('#form').replaceWith(data); // Receive with value
alert('This is add books section');
});
});
$(document).on("click", "#addCategoryId", function() {
  $.get('addCategory.html', function(data) { //The current page
    $('#form').replaceWith(data); // Receive with value
    alert('This is add category section');
  });
});
body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  font-family: Arial;
  font-size: 15px;
}
#container {
  background-color: #707070;
}
#menu {
  width: 1250px;
  margin: 0 auto;
  text-align: left;
}
#menu ul {
  list-style-type: none;
  /*Remove bullets*/
  padding: 0;
  margin: 0;
  position: relative;
}
#menu ul li {
  display: inline-block;
}
#menu ul li:hover {
  text-decoration: none;
  color: black;
}
#menu ul li a,
visited {
  color: #CCC;
  /*Color of text*/
  display: block;
  /*Takes up the full width available*/
  padding: 15px;
  text-decoration: none;
}
#menu ul li a:hover {
  color: #CCC;
  text-decoration: none;
}
#menu ul li:hover ul {
  display: block;
}
#menu ul ul li {
  display: block;
}
#menu ul ul {
  display: none;
  position: absolute;
  background-color: #707070;
  min-width: 140px;
  /*Width when hover*/
}
#menu ul ul li a:hover
/*Color of text when hover*/
{
  color: #099;
}
<!doctype html>
<html>
<head>
  <title>Main</title>
</head>
<body>
  <div id="container">
    <div id="menu">
      <ul>
        <li>
          <a href="#">Manage Books</a>
          <ul>
            <div id="addBooksId">
              <li><a href="#">Add Books</a>
              </li>
            </div>
            <div id="addCategoryId">
              <li><a href="#">Add Category</a>
              </li>
            </div>
          </ul>
        </li>
      </ul>
    </div>
    <!--- end menu --->
  </div>
  <!--- end container --->
  <div id="form">
    <p>Hi</p>
  </div>
</body>
</html>

添加书籍.html

.addBooks {
  clear: both;
  width: 800px;
  margin: 0 auto;
  margin-top: 10%;
}
.addBooks label {
  float: left;
  width: 150px;
  text-align: right;
}
.addBooks input {
  text-align: left;
  margin-left: 100px;
}
<!doctype html>
<html>
<head>
</head>
<body>
  <div id="container">
    <div class="addBooks">
      <h1>Add Books</h1>
      <hr>
      <form action="#">
        <fieldset>
          <div class="form-field">
            <label for="bookId">Book Id:</label>
            <input type="text" id="bookId" name="bookId">
          </div>
          <br />
          <div class="form-field">
            <label for="bookName">Book Name:</label>
            <input type="text" id="bookName" name="bookName">
          </div>
        </fieldset>
      </form>
    </div>
    <!--- end of addBooks --->
  </div>
  <!--- end of container --->
</body>
</html>

添加类别.html

.addCategory {
  clear: both;
  width: 800px;
  margin: 0 auto;
  margin-top: 10%;
}
.addCategory label {
  float: left;
  width: 150px;
  text-align: right;
}
.addCategory input {
  text-align: left;
  margin-left: 100px;
}
<!doctype html>
<html>
<head></head>
<body>
  <div id="container">
    <div class="addCategory">
      <h1>Add Category</h1>
      <hr>
      <form action="#">
        <fieldset>
          <label for="categoryName">Category:</label>
          <input type="categoryName" id="categoryName" name="categoryName">
          <br />
        </fieldset>
      </form>
    </div>
    <!--- end of addCategory --->
  </div>
  <!--- end of container --->
</body>
</html>

jQuery replaceWith(( 函数实际上替换了你通过选择器找到的节点，在你的例子中是 $("#form"(。

我想您要做的是替换节点的内部内容而不是整个 #form 节点，这可以通过以下方式完成：

$("#form").empty().append(data);

为什么需要注册点击两次。如果这解释了，请参阅此示例。

Note the following points though:

  1. 检查条件是否满足并执行replaceWith。
  2. 检查是否有任何data old data and new data是否相同。
  3. 最后也是最重要的一点，检查所有ids是否存在。

EDITED ANSWER

替换代码中的以下部分，它可以完美运行：

$(document).on("click", "#addBooksId", function() {
      $.get("addBooks.html", function(data) { 
          $( "#form" ).empty();
          $('#form').append(data); // Receive with value
alert('This is add books section');
});
});
$(document).on("click", "#addCategoryId", function() {
  $.get('addCategory.html', function(data) { //The current page
      $( "#form" ).empty();
      $('#form').append(data); // Receive with value
    alert('This is add category section');
  });
});

上述代码的问题在于，一旦第一次执行replaceWith，例如您选择了添加框，form id 将替换为 div id container 表示addBooks，因此当您选择 addCatagory 时，没有要replaceWith form id，因为它已经替换为addBooks因此数据不会被绑定。

所以$('#form').replaceWith(data);替换为

$( "#form" ).empty();
$('#form').append(data);

或简单地：

$('#form').empty().append(data);

甚至更简单： 

$('#form').html(data);

Note: 上面的代码只能在网络服务器上运行，而不是直接在浏览器上运行。

尝试将点击按钮替换为以下内容：

$(document).on("click","#foobar",function() {
    // code here
});

在此处阅读何时使用click或on click

相关文章：