更改元素的属性值后，jQuery函数不起作用

Question

I have elements (images in <a> tags) list which arranged by dynamic ID. 我有按动态ID排列的元素（ <a>标记中的图像）列表。 It is possible to select only one of those. 只能选择其中之一。 Assume that I select any element. 假设我选择了任何元素。 This time, I change its style and set "SelectedItem" value to its name attribute to find the selected item in future. 这次，我更改其样式，并将“ SelectedItem”值设置为其名称属性，以在将来查找所选项目。 I want that, when mouse over selected item, to change its src value, but jquery function does not work, because I set name="SelectedItem" attribute with javascript, in runtime, it works after reload a page. 我希望当鼠标悬停在选定项目上时更改其src值，但是jquery函数不起作用，因为我使用javascript设置了name =“ SelectedItem”属性，因此在运行时，它在重新加载页面后可以工作。 When I set name="SelectedItem" in the code (default, before runtime) it work. 当我在代码中设置name =“ SelectedItem”时（默认值，运行时之前），它将起作用。 But I want to do it without reloading a page. 但我想这样做而无需重新加载页面。

在此处输入图片说明

Shortly, when I do select operation I set name="SelectedItem" to selected image: 很快，当我选择操作时，我将name =“ SelectedItem”设置为所选图像：

function SelectItem(id) {
var imgId = 'productImage_' + id;
var imgId_element = document.getElementById(imgId.toString());

//my some operations

imgId_element.name = "SelectedItem";
}

And take name's value when UnSelect. 并在取消选择时取名称的值。

function UnSelectItem(id) {
var imgId = 'productImage_' + id;
var imgId_element = document.getElementById(imgId.toString());

//my some operations

imgId_element.name = "";
}

I want to set unselect image to background of only selected images. 我想将取消选择图像设置为仅所选图像的背景。 When I Select/Unselect any item with SelectItem()/UnSelectItem() following mouseover()/mouseout() not work. 当我使用SelectItem()/UnSelectItem() Select/Unselect任何项目时， mouseover()/mouseout()不起作用。

$("img[name='SelectedItem']").mouseover(function () {
            $(this).attr("src", "/Content/images/select.png");
        }).mouseout(function () {
            $(this).attr("src", "/Content/images/unselect.png");
});

HTML is: HTML是：

<img src="@Url.Content("~/Content/images/select.png")" id='productImage_@(Model.Id)'  data-id='@Model.Id'  @{if (Model.IsSelected) { <text>name="SelectedItem"</text>} }  alt="" />

How can I solve this problem? 我怎么解决这个问题？

Answer 1

Try: 尝试：

$('body').on('mouseover', 'img[name=SelectedItem]', function() {
  this.src = "/Content/images/select.png";
}).on('mouseout', 'img[name=SelectedItem]', function() {
  this.src = "/Content/images/unselect.png";
});

By using the 3-argument variant of .on() , you set up a delegated handler on the <body> element. 通过使用.on()的3参数变体，您可以在<body>元素上设置委托处理程序。 When the mouse events bubble up to that, the handler will check the target element against the selector. 当鼠标事件冒泡时，处理程序将根据选择器检查目标元素。

Now, that said, using the "name" property/attribute for <img> elements doesn't make a lot of sense; 话虽如此，对<img>元素使用“名称”属性/属性没有多大意义； that's not a valid attribute. 这不是有效的属性。 You'd be better off adding/removing a class value: 您最好添加/删除类值：

function SelectItem(id) {
  $('#productImage' + id).addClass('SelectedItem');
}

and then: 接着：

$('body').on('mouseover', '.SelectedItem', function() { ... })

etc. Finally, you'd be better off using the synthetic "mouseenter" and "mouseleave" events, as those get over some browser oddities. 最后，最好使用合成的“ mouseenter”和“ mouseleave”事件，因为它们会克服一些浏览器异常。

更改元素的属性值后，jQuery函数不起作用

问题描述

1 个解决方案

解决方案1
4 已采纳 2013-01-19 16:48:34

更改元素的属性值后，jQuery函数不起作用

问题描述

1 个解决方案

解决方案1 4 已采纳 2013-01-19 16:48:34

解决方案1
4 已采纳 2013-01-19 16:48:34