Question

我正在尝试在选择不同颜色时更改产品图像。当我使用直接HTML时，我的jQuery代码工作正常，但当我尝试使用Ajax选择更改图像时，只有第一个选择有效。似乎我的jQuery只读取初始html而不是初始加载后所做的更改。我认为.on会处理更新后的HTML，但我似乎错过了一些东西。任何指导都将非常感谢。

jQuery(window).load(function(){
  var data = {
   "1" : { img: "/test.png" },
   "2" : { img: "/test_1.png" },
   "3" : { img: "/test_2.png" },
  };
   jQuery('[name*="Color"]').on('change',function() {
var value = jQuery(this).val();
if (data[value] != undefined)
{
    jQuery('#product-image').attr('src', data[value].img);        
}
 });});

Answer 1

我能够使用Brandon Aaron的livequery插件来完成我想要做的事情。我的印象是livequery插件只适用于较旧版本的jQuery，结果我错了，它很适合1.7.1仍然不确定为什么.on不起作用。

Answer 2

在将新节点插入文档后，您需要重做事件绑定。尝试插入代码：

jQuery('[name*="Color"]').on('change',function()...

在加载函数回调中。

修改

我现在意识到你在窗口文档中注册了一个加载事件......你做错了......你需要加载新节点，插入它们并注册它们的事件。

您需要执行以下操作：

$( "#idOfTheElementThatWillContainTheNewNodes" ).load( "url to obtain the code to be inserted", { param1: value1, ..., paramN : valueN }, // parameters to be sent to the server (if any) function( responseText, textStatus, xmlHttpRequest ) { // this is the load callback. it will run after the request is complete // ok, the responseText was inserted in "idOfTheElementThatWillContainTheNewNodes" container. // now you do register your events... } );

查看文档：{{3}}

我为您创建了一个示例，请看一下：http://api.jquery.com/load/

关于ajax html更改选择的Jquery更改图像

2 个答案: