Question

我创建了一个锚标记，然后创建了一个click事件处理程序，但事件没有触发。我认为jQuery语法不正确？

var b = '<a class="dz-remove removeAttachment">Remove</a>';
var someOtherElement = $(dropZoneElement).find(".dz-file-preview")[0];
$(someOtherElement).append(b);
$(b).on('click', function() {
  dropone.removeAllFiles();
})

Answer 1

您的问题是您实际创建了两个独立的锚元素：$(someOtherElement).append(b)和$(b).。

使用以下代码。我假设你在此代码段上方定义了dropone和dropZoneElement。

var $b = $('<a class="dz-remove removeAttachment">Remove</a>');
$b.click( function() { dropone.removeAllFiles(); });
$(dropZoneElement).find(".dz-file-preview:first").append($b);

Answer 2

您无法将事件绑定到字符串。

您应该将其绑定到DOM元素。在加载整个文档后添加DOM元素时，使用＆＃39;委托＆＃39;帮助你。

这应该有效：

package com.example.android.miwok;

import android.media.MediaPlayer;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

import java.util.ArrayList;

public class NumbersActivity extends AppCompatActivity {

private MediaPlayer mMediaPlayer;

private MediaPlayer.OnCompletionListener mCompletionListerner = new MediaPlayer.OnCompletionListener() {
    @Override
    public void onCompletion(MediaPlayer mediaPlayer) {
        releaseMediaPlayer();
    }
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.word_list);

    final ArrayList<Word> words = new ArrayList<>();    // <-- Creates list

    words.add(new Word("one", "lutti", R.raw.number_one, R.drawable.number_one));
    words.add(new Word("two", "otiiko", R.raw.number_two, R.drawable.number_two));
    words.add(new Word("three", "tolookosu", R.raw.number_three, R.drawable.number_three));
    words.add(new Word("four", "oyyisa", R.raw.number_four, R.drawable.number_four));
    words.add(new Word("five", "massokka", R.raw.number_five, R.drawable.number_five));
    words.add(new Word("six", "temmokka", R.raw.number_six, R.drawable.number_six));
    words.add(new Word("seven", "kenekaku", R.raw.number_seven, R.drawable.number_seven));
    words.add(new Word("eight", "kawinta", R.raw.number_eight, R.drawable.number_eight));
    words.add(new Word("nine", "wo'e", R.raw.number_nine, R.drawable.number_nine));
    words.add(new Word("ten", "na'aacha", R.raw.number_ten, R.drawable.number_ten));

    WordAdapter adapter = new WordAdapter(this, words, R.color.category_numbers);


    ListView listView = (ListView) findViewById(R.id.list);     // <-- id the Listview
    listView.setAdapter(adapter);

    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
            releaseMediaPlayer();
            Word word = words.get(position);
            mMediaPlayer = MediaPlayer.create(NumbersActivity.this, word.getAudioResourceId());
            mMediaPlayer.start();
            mMediaPlayer.setOnCompletionListener(mCompletionListerner);
        }
    });
}

private void releaseMediaPlayer() {
    if (mMediaPlayer != null) {
        mMediaPlayer.release();
        mMediaPlayer = null;
    }
}
}

Answer 3

Var b仍然是一个字符串而不是Dom元素，您必须按类选择插入的元素，然后为其分配click事件。

Answer 4

试试这个：

var b = '<a class="dz-remove removeAttachment">Remove</a>';
var someOtherElement = $(dropZoneElement).find(".dz-file-preview")[0];
$(someOtherElement).append(b);
$(someOtherElement).find('a').on('click', function() {
  dropone.removeAllFiles();
})

Answer 5

问题是你的var b是一个字符串。您需要做的是创建一个dom元素并将事件侦听器添加到该元素。

将var b更改为

var b = $.parseHTML('<a class="dz-remove removeAttachment">Remove</a>'); // $.parseHTML is a jQuery method to create HTML from a string

创建一个HTML元素，当您将点击事件添加到var b时，它将正常运行。

示例：https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/EncapsulatingData/EncapsulatingData.html

Answer 6

您可以轻松实现替换

$(b).on('click', function() {
  dropone.removeAllFiles();
});

与

$('.dz-remove').on('click', function() {
  // your code....
});

你可以看到你的所有代码都运行良好:)

Answer 7

你为自己添加了很多额外的工作来生成这样的元素。此外，该代码执行方式存在一些问题。首先，您要创建两个独立的锚标记，(0,0)和.append(b);。其次，您将事件处理程序附加到您创建的第二个锚标记，但是您没有将该标记插入到DOM中。

谢天谢地，我们可以解决这个问题。在引用jQuery Docs时，您会看到绝大多数函数都返回$(b)。这很棒，因为它允许我们将命令链接在一起并降低代码的复杂性。请尝试以下方法：

jQuery

<强>样本：

$('<a />', { "class": "dz-remove removeAttachment", text: "Remove" })
    .appendTo($(dropZoneElement).find(".dz-file-preview"))
    .on('click', function () {
        dropone.removeAllFiles();
    });

// Document Ready
$(function () {
    $('<a />', { "class": "dz-remove removeAttachment", text: "Remove" })
        .appendTo($('#dropzoneElement').find(".dz-file-preview"))
        .on('click', function () {
   	        alert("I'm chained!");
        });
});

a {
  display: block;
  border: 1px solid red;
  color: red;
  padding: 5px 7px;
  width: 70px;
  text-align: center;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a:hover {
  background: red;
  color: #fff;
}

OnClick无法使用我的元素

7 个答案: