jQuery文档操作上不选择输入工作

请参考http://jsfiddle.net/7FfMd/6/jQuery文档操作上不选择输入工作

运行代码，然后选择“E”，从下拉，另一个输入框出现，但是我不能从第二输入选择B选项。

我该如何解决这个问题。

出于某种原因，当我从第一次输入再次选择选项“D”时，第二个选择框不会更新。

感谢

来源

2012-02-08 shiro

您正将'change'事件处理程序绑定到两个select元素的祖先。这意味着当您更改第二个元素时，处理程序会被触发，并再次由HTML取代，该元素将再次选择第一个元素。 – 2012-02-08 14:18:17

@shiro如果下面的任何答案对你有用，那么你应该接受一个。 – HaBo 2012-02-08 14:48:19

这是因为您捕获了包围这两个下拉菜单的div上的更改事件。当您更改第二个下拉菜单时，将触发事件处理程序，并删除您做出选择的下拉列表，并将其替换为新的下拉列表。

如果要将更改事件绑定到父元素，则需要检查在哪个下拉列表中进行了更改（使用event.target），以便不重新创建所有下拉列表。如果您使用delegate到事件处理程序绑定，this将包含在那里进行了更改元素：

jQuery('.change').delegate('select', 'change', function() { ... });

这可能是简单的绑定事件对于每个选择，那么你就不必检查至极下拉导致事件。如果你使用delegate，可以绑定eventhough元素的事件不存在，但你需要把一个类名或ID的下拉菜单，使它们可以被识别：

jQuery('.change').delegate('#firstDropdown', 'change', function() { ... }); 
jQuery('.change').delegate('#secondDropdown', 'change', function() { ... });

来源

2012-02-08 14:18:30 Guffa

我有很多选择框，并且还在“change”类（div标签）中输入字段。事件在输入字段发生变化时会触发“更改”类。我在这里修改了一些代码http://jsfiddle.net/7FfMd/16/。仍有错误，我不能选择E然后选择B 。我该如何解决它？谢谢 – shiro 2012-02-21 19:30:20

@shiro：您可以使用事件对象的'target'属性来找出哪个元素导致事件：http://jsfiddle.net/Guffa/7FfMd/18/ – Guffa 2012-02-21 19:39:10

你没有得到的输入val，但都拿到包含输入的div val：

var testVar= jQuery('#placeholder2').val();

应该

var testVar = jQuery('#placeholder2 select').val();

此外， change用户应该只在选择，而不是div也（避免事件发生时，第二个select是ch anged）：

jQuery('.change').change(function() {

应该

jQuery('.change select').change(function() {

See here的更新版本。

来源

2012-02-08 14:17:58

非常感谢，这有所帮助。我需要第二次选择的事件发生改变。所以，我会保持jQuery（'。change'）。change（function（）{ – shiro 2012-02-08 14:33:53

的问题是您已将change事件处理程序绑定到包含<select>元素的<div>元素。无论何时更改任何这些<select>元素，更改事件都将升至<div>。这对第一个工作正常，但当你改变第二个时，它会再次触发该代码并替换整个<select>元素。

来源

2012-02-08 14:19:01

那是因为你与

var testVar= jQuery('#placeholder2').val();

这种尝试从DIV，而不是选择让.val()访问选择的值。试试这个：

var testVar= jQuery('#placeholder2 select').val();

来源

2012-02-08 14:19:38

不要忘记，当你添加新元素时，你之前应用的方法将不会被应用到它们。

您需要将事件代码应用于新元素。

来源

2012-02-08 14:19:39 CompanyDroneFromSector7G

您正在创建一个具有类.change的div。所以这个功能是由它的孩子所做的一切改变来处理的。

看一看这段代码：

http://jsfiddle.net/7FfMd/13/

来源

2012-02-08 14:20:46

您的jQuery是错误的。这里是我的回答标记是如下

<div class='change'> 
    <div id="placeholder2" style="width:600px;"> 
     <select> 
      <option selected="selected">D</option> 
     <option >E</option> 
     </select> 
    </div> 
    <div id="placeholder" style="width:600px;"></div> 
</div>

jQuery的应该是这样的。

jQuery('#placeholder2>select').change(function(){ 
    var testVar= $(this).val(); 
    alert(testVar); 
    if (testVar == "D") 
    { 
     var htmlString = '<select><option>C</option></select>'; 
     jQuery('#placeholder').html(htmlString); 
    } else 
    { 
     var htmlString = '<select><option>A</option><option>B</option></select>'; 
     jQuery('#placeholder').html(htmlString); 
    } 
});

来源

2012-02-08 14:29:48 HaBo

jQuery文档操作上不选择输入工作

回答

相关问题