为现有的jQuery按钮添加一个带有jQuery的按钮

问题描述 投票：0回答：2

有人可以帮助我/解释我该怎么做或者是否可能？我有一个简单的html代码用于购物清单：

<!DOCTYPE html>
<html>
    <head>
        <title>Let's buy...</title>         
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>

    <body>
        <h2 class="title">My grocery list<span id="counter"></span> </h2>
        <ul id="list-items"></ul>
        <div id="newItemButton"><button href="#" id="showForm">new item</button></div>
        <form id="newItemForm">
            <input type="text" id="itemDescription" placeholder="Add item..."/>
            <input type="submit" id="addButton" value="add" />    
        </form>   
        <script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
        <!-- <script type="text/javascript"
        src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> -->
        <script type="text/javascript" src="js/javascript.js"></script>
    </body>
</html>

我是用户在列表中添加元素 - 当用户添加项目时，该项目附带一个按钮。现在，我希望按钮“更改项目”添加4个带append（）的按钮，我想要每个按钮，当点击更改项目的颜色时，例如红色，绿色，橙色和灰色 - 取决于用户的喜好。我试图添加这些按钮，但我似乎没有添加它，它没有出现在页面上 - 只是说 - 我试图只添加一个按钮:)。这是我的jQuery代码......：

$(function() {
    let $list, $newItemForm, $newItemButton;
    let item = '';
    $list = $('ul');
    $newItemForm = $('#newItemForm');
    $newItemButton = $('#newItemButton');

    function updateCount() {
        let items = $('li').length;
        $('#counter').text(items);
    }
    updateCount();

    $newItemButton.show();
    $newItemForm.hide();
    $('#showForm').on('click', function() {
        $newItemButton.hide();
        $newItemForm.show();
    });

    $newItemForm.on('submit', function(e) {
        e.preventDefault();
        let text = $('input:text').val();
        $list.append('<li>' + text + '<button id="btn-change">change item</button><hr></li>');
        $('input:text').val('');
        updateCount();    
    });

这是='按钮添加过程'：

   $('#btn-change').one('click', function() {
            let b = $('<input/>').attr({
                type: "button",
                id: "hot",
                value: 'hot'
            });
            $("button").append(b);
        });
javascript jquery button
2个回答
0
投票

还有其他一些事情需要解决，例如多个按钮，如何实例化事件处理程序等等。但是要回答你的“为什么我的新输入没有出现”。

按钮元素不应包含和输入元素。你可以看出为什么那没有意义。因此，要在此之后创建类型按钮的新输入而不附加TO，请使用.after。现在假设实际点击的是我们要附加到的那个我们可以使用this并附加到id为btn-change的按钮

$('#btn-change').one('click', function() {
   let b = $('<input/>').attr({
        type: "button",
        id: "hot",
        value: 'hot'
    });
    $(this).after(b);
});

这是另一个选项，只是使用一个执行相同功能的不同方法，做同样的事情，但也许名称使意图更清晰。

$('#btn-change').one('click', function() {
   let b = $('<input/>').attr({
        type: "button",
        id: "hot",
        value: 'hot'
    });
    b.insertAfter(this);
});

现在我们可以添加一个按钮，我们观察到我们添加了这个动态点击的按钮，因此我们需要允许我们的事件处理程序也是动态的，即将它附加到按钮的容器中。

list-items是我们的容器，所以我们依附于此。

$('#list-items').one('click', '#btn-change',function() {
   let b = $('<input/>').attr({
        type: "button",
        id: "hot",
        value: 'hot'
    });
    b.insertAfter(this);
});

既然我们有了事件处理程序，我们也注意到重复的id无效，所以我们修改为使用类而不是id。

$('#list-items').one('click', '.btn-change',function() {
   let b = $('<input/>').attr({
        type: "button",
        class: "hot",
        value: 'hot'
    });
    b.insertAfter(this);
});

现在我们有一些解释，让我们做一个解决方案

$(function() {
  let $list, $newItemForm, $newItemButton;
  let item = '';
  $list = $('#list-items'); // use faster id
  $newItemForm = $('#newItemForm');
  $newItemButton = $('#newItemButton');

  function updateCount() {
    let items = $list.find('li').length; // get inside our list
    $('#counter').text(items);
  }
  updateCount();

  $newItemButton.show();
  $newItemForm.hide();
  $newItemButton.on('click', function() {
    $newItemButton.hide();
    $newItemForm.show();
  });

  function addButton(place, b) {
    let bt = $('<input/>').attr({
      type: "button",
      class: b + "button colorbutton",
      value: b
    }).data("colorclass", b + "thing");
    bt.insertAfter(place);
  }
  // perhaps change to button type not submit type?
  $newItemForm.on('submit', function(e) {
    e.preventDefault();
    let text = $('#itemDescription').val(); // use fast id
    text = text=""?"new":text;//avoid empty text
    $list.append('<li><span class="desc">' + text + '</span><button type="button" class="btn-change">change item</button><hr></li>');
    $('#itemDescription').val('');
    updateCount();
  });
  $('#list-items').on('click', '.colorbutton', function() {
    $(this).parent().find('.desc')
     .removeClass("hotthing greenthing orangething greything")
     .addClass($(this).data("colorclass"));
  });
  //Note the change here from discussion, still adds the buttons but more modular, disables button to avoid second click vs the .one, works for new items
  $('#list-items').on('click', '.btn-change', function() {
    $(this).prop("disabled", true); // only add once so disable it
    // add the color buttons, matches classes in css
    addButton(this, "hot");
    addButton(this, "green");
    addButton(this, "orange");
    addButton(this, "grey");
  });
});
.hotbutton {
  color: red;
}

.greenbutton {
  color: green;
}

.orangebutton {
  color: orange;
}

.greybutton {
  color: grey;
}

.hotthing {
  background-color: red;
}

.greenthing {
  background-color: green;
}

.orangething {
  background-color: orange;
}

.greything {
  background-color: grey;
}

#list-items {
  border: solid lime 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
  <h2 class="title">My grocery list<span id="counter"></span> </h2>
  <ul id="list-items"></ul>
  <div id="newItemButton"><button type="button" id="showForm">new item</button></div>
  <form id="newItemForm">
    <input type="text" id="itemDescription" placeholder="Add item..." />
    <input type="submit" id="addButton" value="add" />
  </form>
</body>
0
投票

您正在处理的问题是您尝试从动态生成的元素触发事件。附加事件时，页面中未加载＃btn-change元素。基于documentation，您可以添加选择器。您必须将事件附加到页面的稳定元素中，例如ul＃list-items

所以你的代码看起来像这样

$("ul#list-items").one('click','#btn-change', function() {
        let b = $('<input/>').attr({
            type: "button",
            id: "hot",
            value: 'hot'
        });
        $("button").append(b);
});

或者您可以语法附加事件。

另外，我建议你使用类而不是id在同一页面上多次存在的元素（例如<button id='btn-change'></button>），id必须在你的页面中是唯一的。

所以我建议的代码看起来像这样

$newItemForm.on('submit', function(e) {
    e.preventDefault();
    let text = $('input:text').val();
    $list.append('<li>' + text + '<button class="btn-change">change item</button><hr></li>');
        $('input:text').val('');
        updateCount();    
});

将id='btn-change'改为class='btn-change'

以及btn-change点击事件的代码

$('ul#list-items').one('click','.btn-change', function() {
    let btnContainer = $("<div></div>").css("display","inline-block").attr({
        class: "btn-container"
    });

    btnContainer.append(
        $('<input/>').attr({
            type: "button",
            class: "hot", //use class instead of id in case you generate more than 1 element
            value: 'hot'
        })
    ).append(
        $('<input/>').attr({
            type: "button",
            class: "green", //use class instead of id in case you generate more than 1 element
            value: 'green'
        })
    ).append(
        $('<input/>').attr({
            type: "button",
            class: "grey", //use class instead of id in case you generate more than 1 elements 
            value: 'grey'
        })
    ).append(
        $('<input/>').attr({
            type: "button",
            class: "orange", //use class instead of id in case you generate more than 1 element
            value: 'orange'
        })
    );

    btnContainer.insertBefore(this);
    $(this).hide();//or remove based on what you want to achieve

});

这里我使用.btn-change作为选择器，我正在创建一个容器元素来保存四个按钮然后我在.btn-change按钮之前添加四个按钮的容器并隐藏按钮。

您可以稍后添加将删除/隐藏四个按钮的容器的代码部分，并显示.btn-change按钮

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.