Question

我是jQuery的新手，但我开始关注它（我认为）。我有一个切换ul（新餐厅）作为按钮，当我点击ul按钮我希望按钮在预先存在的新餐厅按钮上方创建一个新的切换。

例如在

之前

在

我真的想自己解决这个问题，但是我想请一点指导。目前没有任何事情发生，如下所示：

下面的

脚本：

 $(document).ready(function(){
           $('li#order_open').click(function(){
              var $newRestaurant = $('<li id="order_open">New restaurant <a href="Menu.php";></a></li>');
              $('li').before($newRestaurant);
               });

  <!--Restaurant toggle-->
            <a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3 id="open">Your Restaurants</h3></a>
            <div id="Rest" style="display: none;"><div>

                    <ul class="tabs">
                        <!--                    <li id="order" class="rred"><a href="Franchise-account-orders.php">restaurant</a></li>-->
                        <li id="order_open" class="rgreen"><a href="javascript:void(0);">New restaurant</a></li>

                    </ul>

我也尝试过：

 $(document).ready(function(){
           $('li#order').click(function(){
               $('li#order').before('<li id="order">New restaurant <a href="Menu.php";></a></li>');
               });

 <a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3 id="open">Your Restaurants</h3></a>
            <div id="Rest" style="display: none;"><div>

                    <ul class="tabs">
                        <!--                    <li id="order" class="rred"><a href="Franchise-account-orders.php">restaurant</a></li>-->
                        <li id="order_open" class="rgreen"><a href="javascript:void(0);">New restaurant</a></li>

                    </ul>

Answer 1

我希望，我理解你的问题。您可以通过以下方式在元素之前添加内容：

 $(document).ready(function(){
     $('#order_open').click(function(){
         //HTML you want to add
         var $newRestaurant = '<li id="order_open">New restaurant<a href="Menu.php";></a></li>';
         //insert before your clicked button
         $(this).before($newRestaurant);
     });
});

我为你做了一个小提琴：http://jsfiddle.net/6o593keg/

如果您想在插入的按钮上使用事件处理程序，则必须在插入新元素后添加新的事件处理程序：

$(this).click(...)

Answer 2

您似乎在此行中创建了新的jquery元素：

var $newRestaurant = $('<li id="order_open">New restaurant <a href="Menu.php";></a></li>');

所以$ newRestaurant不是指向你点击的（选中的）li，而是指向甚至没有附加到DOM的新元素。

您应该使用$（this）来引用附加元素。

根据文件http://api.jquery.com/on/：

当jQuery调用一个处理程序时，this关键字是对它的引用事件交付的元素;对于直接绑定的事件这是附加事件和委托事件的元素事件这是一个元素匹配选择器。（请注意，这可能不是如果事件来自后代，则等于event.target element。）从元素创建一个jQuery对象，以便它可以与jQuery方法一起使用，使用$（this）

Answer 3

您不能拥有多个具有相同ID的HTML元素，您应该增加id或使用class作为选择器

var $newRestaurant = $('<li class="order_open">New restaurant <a href="Menu.php";></a></li>');

Answer 4

你不应该在动态内容中使用id，而是使用class。

如果您只想在单击它时复制其上方的列表项，则可以使用clone()方法，如下所示：

＆＃13;

$(document).ready(function() {
  $('.tabs').on('click','li.order_open', function() {
    $(this).before($(this).clone()); // or any custom content
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Restaurant toggle-->
<a id="restt" class="header" href="#" onclick="toggleVisibility('Rest');"><h3 id="open">Your Restaurants</h3></a>
<div id="Rest">
  <div>
    <ul class="tabs">
      <li class="rgreen order_open"><a href="javascript:void(0);">New restaurant</a>
      </li>
    </ul>

＆＃13;

请注意，您应该使用event delegation，以便处理程序也适用于注入的元素。

jquery - 使用onclick和.before向页面添加新内容

4 个答案: