时间戳

首页 > 解决方案 > 突破 .on('click')

javascript - 突破 .on('click')

问题描述

我有一个带有下拉框的单选按钮：

<form>
  <input type="radio" id="pan" class="radioButton" value="pan">
  <label for="pan">PAN</label>
  <input type="radio" id="singleColor" class="radioButton" value="singleColor">
  <label for="singleColor"> 
       <span>
           <select name="imageColor" id="selectedColor">
               <option value="red" selected="selected">Red</option>
               <option value="red">Green</option>
               <option value="red">Blue</option>
           </select>
       </span>
    </label>
</form>

如果我单击下拉框而不选择单选按钮 - 没有任何反应，这是预期的。
如果我单击单选按钮，它会传递当前值，如果我通过单击单选按钮更改值，它会更新值。
从这个意义上说，一切正常，但是，如果我单击“平移”中的另一个单选按钮，然后从下拉列表中选择一种颜色，该颜色仍然会被传递，并且该颜色的图像会出现。
我不想要要从下拉列表中读取的颜色，除非选择了该单选按钮。任何人都知道从另一个函数中突破 .on('click') 的方法吗？

下面是一个 javascript 示例：

$('#singleColor).on('click',function() {
    if($('selectedColor').val() === "red") {
       //ajax code for red
    }
    if($('selectedColor').val() === "green") {
       //ajax code for green
    }
    $('#selectedColor').change(function () {
        if($('#selectedColor').val() === "red") { 
            //ajax code for red
        }
        if($('#selectedColor').val() === "green") { 
            //ajax code for green
        }
    }
}

所以本质上 - 当没有为此选择单选按钮时 - 但我使用下拉菜单它仍然可以访问您可以带入图像的下拉菜单。
它仅在您单击单选按钮时才获得访问权限，因此最初，如果您要刷新页面并单击下拉菜单，您将不会得到响应......
但是当您单击下拉菜单的单选按钮然后单击另一个单选按钮时按钮然后访问下拉菜单，您将始终得到响应。

对不起，如果这有点罗嗦..很难解释这个问题。

如果您需要更多信息，请告诉我。谢谢！

标签： javascripthtmljquery

解决方案

当您单击#singleColor收音机时，您将一个change事件侦听器附加到另一个元素并保持在它上面。然后，是否单击单选按钮都没有关系，因为在下拉元素值更改时会执行其他事件侦听器。

正确的解决方案是仅将一次change事件侦听器附加到下拉列表，然后检查是否选中（或不选中）#singleColor 单选。

$('#selectedColor').change(function () {
    if (! $('#singleColor').is(':checked'))
        return; // dont do anything if radio not checked

    if ($(this).val() === "red") { 
        // ajax code for red
    }

    if ($(this).val() === "green") { 
        // ajax code for green
    }
}

此外，如果您想在“无线电”检查中触发此事件和 ajax 函数，您只需在无线电事件trigger中的下拉元素上使用函数：click

$('#singleColor').on('click' function () {
    $('selectedColor').trigger('change');
});

推荐阅读