javascript - 为什么不将 this.parent() 定义为函数？

Question

JSFiddle

我正在创建一个新的按钮元素

$('<button>Remove Entry</button>', { 'type': 'button', 'class': 'delete_button' });

然而，type 或 class 属性似乎都没有定义，并且控制台打印出一条错误消息，指出 this.parent() is不是函数(虽然我肯定我启用了 jquery)

恐怕我做了一些简单而愚蠢的事情，但我似乎找不到任何错误。

Answer 1

没有在元素上设置属性的原因是您混合使用了 jQuery 方法。

要以使用对象作为属性的方式使用该方法，第一个参数应该是单个标记，而不是 HTML 片段:

$('<button>', { 'type': 'button', 'class': 'delete_button' }).text('Remove Entry');

this 没有parent 方法的原因是它指的是一个元素，而不是一个jQuery 对象。您可以使用 $(this) 从元素引用创建一个 jQuery 对象。

此外，this 指的是新条目按钮，而不是删除条目按钮，因为您在绑定(bind)事件时调用该方法。您应该在事件发生时调用该方法:

delete_button.click(function() {
  remove_entry($(this).parent())
});

演示:http://jsfiddle.net/Guffa/9TcpB/1/

  var entries = 0;
  
  function new_entry() {
    entries++
    new_entry_div = $('<div>', { 'class': 'entry' }).appendTo('form');
    new_entry_div.html('<p><input type="text"></p>')

     
//     delete button
    delete_button = $('<button>', { 'type': 'button', 'class': 'delete_button' }).text('Remove Entry');
    delete_button.appendTo(new_entry_div);
      delete_button.click(function(){
          remove_entry($(this).parent());
      });
  }
  
  function remove_entry(entry) {
    entry.remove();
  }
  
  $("#newButton").click(function () {
    new_entry();
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input">
      <form>
      </form>
      <button id="newButton">New Entry</button>
    </div>