Question

我有两个.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');
            });
    });

main.html中

＆＃13;

< 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');
  });
});

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

addBooks.html

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

addCategory.html

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

jQuery replaceWith()函数实际上替换了您通过选择器找到的节点，在您的情况下是$（＆＃34;＃form＆＃34;）。

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

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

Answer 2

尝试将click hanlder替换为：

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

了解何时使用click或on click here

Answer 3

为什么需要注册两次点击。如果有解释，请参阅此example。

Note the following points though:

检查条件是否满足且replaceWith是否已执行。
如果有任何old data and new data，请检查data是否相同。
最后，最重要的是检查所有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没有form id到replaceWith，因为它已被addBooks替换，因此数据不会被绑定。

所以用{/ p>替换$('#form').replaceWith(data);

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

或简单地说：

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

甚至更简单：

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

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

.replaceWith不能使用.click函数加载另一个值

3 个答案: