Question

我开发了一个电影导演。所有发现的电影都是电影片名和电影的海报。找到的电影显示在列表中（<ul>）。每个电影标题都是具有相同id='movie'的锚点。

<li>
    <p>
       <a id="movie" href="#"> title </a>
    </p>
    <img src="thumbnailSrc">
</li>

点击标题后，我想运行它：

$('#movie').on('click', function (event) {
    event.preventDefault();
    console.log('Hello World!');
});

但它不起作用。 Anyoine知道为什么吗？我想它必须是id，但我不知道如何解决它。我曾尝试使用Chrome工具对其进行调查，但我不知道该怎么做。

Answer 1

首先将您的id =“movie”更改为class =“movie”。像下面这样更改你的HTML：

enter code here

 <li>
    <p>
       <a class="movie" href="javascript:void(0);"> title </a>
    </p>
    <img alt="Image name" src="thumbnailSrc">
 </li>

现在尝试以下代码：

$(document.body).on('click','.movie',function(){
    console.log('Hello World!');
});

修改

将void（）更改为void（0）以使其在锚标记中正常工作。

Answer 2

而不是重复id's （Id＆＃39; s必须在页面中唯一）重复class并使用document.ready()阻止，如下所示： - < / p>

$(document).ready(function(){
  $('.movie').on('click', function (event) {
    event.preventDefault();
    console.log('Hello World!');
  });
});

Answer 3

两个问题（至少）：

将您的JS包裹在$(document).ready()函数
使用类。

Answer 4

请尝试下载。

<li>
    <p>
       <a class="movie" href="#"> title </a>
    </p>
    <img src="thumbnailSrc">
</li>

$('.ClassName').on('click', function (event) {
    event.preventDefault();
    // You code here with 
    //$(this).text(); or $(this).html();
    console.log('Hello World!');
});

希望这会对你有所帮助。

为什么$（'＃id'）。on（'click'，function（event）{...}）;不起作用？

4 个答案: