Question

我正在使用

创建一个新的按钮元素

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

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

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

Answer 1

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

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

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

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

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

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>

Answer 2

你基本上是这样做的

$("#newButton").click(function() {
    new_entry;
});

function new_entry() {
    this.parent();
}

但是在事件处理程序的回调中，this是本机JS DOM元素，而不是jQuery对象，所以它没有jQuery方法，你必须先将它包装起来，如

$("#newButton").click(new_entry);

function new_entry() {
    $(this).parent();
}

Answer 3

this包含DOM元素。如果要使用jQuery方法，则必须将其转换为$(this)的jQuery对象。

Answer 4

的 jsFiddle Demo 的

使用call方法保留当前上下文：

$("#newButton").click(function () { new_entry.call($(this));//now this in new_entry refers to `$(this)` })

为什么this.parent（）不是定义为函数？

4 个答案: