jQuery .on() 方法适用于 Firefox 但不适用于 Chrome

Question

我正在尝试在我的网页上创建一个特定的功能，它使用 jQuery 遍历 JSON 对象，用它的值填充一个组合框，并附加点击事件处理程序使用 jQuery 的 .on() 方法进入选项。

一切似乎都运行良好，直到我决定在 Google Chrome. 上测试功能（我一直在 Firefox Developer Edition 上开发直到现在）。 jQuery 中的 .on() 方法似乎根本不适用于 Google Chrome。

这是我网页的 HTML 代码片段

<div id="showotherinfo">
    <div class="form-group" id="existingRedirection" style="">
        <label for="serviceNameList">Select a Pretty Redirection to edit it, or add a new one below</label>
        <select class="form-control" id="serviceNameList" name="serviceNameList">
            <option value="0">-Add New-</option>
            <option value="57">Infibeam Redirection</option>
            <option value="53">Mozilla Developers Redirection</option>
            <option value="56">SnapDeal Redirection</option>
        </select>
        <hr style="height: 1px; border: none; color: #333; background-color: #333;">                                                    
    </div>
    <div class="form-group">
        <label for="name">Service Name<font color="red" size=3>*</font></label> 
        <input class="form-control" name="name" id="name">  
    </div>
     <div class="form-group">
        <label for="serviceUrl">Target URL<font color="red" size=3>*</font></label> 
        <input class="form-control" name="serviceUrl" id="serviceUrl">
    </div>
    <label for="prettyUrl">Pretty URL<font color="red" size=3>*</font></label>
    <div class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" name="prettyUrl" id="prettyUrl" >
        </div>
    </div>
    <div class="form-group" style="margin-top: 19px;">
        <label for="redirectType">Redirect Type<font color="red" size=3>*</font></label> 
        <select class="form-control"
            name="redirectType" id="redirectType">
            <option value="0" SELECTED>-Redirection Type-</option>
            <option value="307">Temporary(307)</option>
            <option value="301">Permanent(301)</option>
            <option value="302">Found(302)</option>
        </select> 
    </div>
    <div class="checkbox">
        <label style="font-weight: bold;">
            <input type="checkbox" name="nofollow" id="nofollow">
            NoFollow this link
        </label> 
    </div>
    <div class="form-group">
        <button id="saveRIP" type="button" class="btn btn-primary"
                onclick="saveData('save')">Save</button>
        <button id="updateRIP" type="button"
                class="btn btn-primary" onclick="saveData('update')"
                >Update</button>
        <button id="delete" type="button" class="btn btn-danger"
        onclick="saveData('delete')">Delete</button>
        <button id="resetRIP" type="button"
                class="btn btn-danger" onclick="resetValue()" style="margin-left: 45px;">Reset</button>
    </div>
</div>

这是完成所有工作的 jQuery 代码

var $select = $('#serviceNameList');
var $firstOption = $("<option/>");
$firstOption.attr("value", 0);
$firstOption.text("-Add New-");

$firstOption.on('click', function() {
    $('#name').val("");
    $('#serviceUrl').val("");
    $('#prettyUrl').val("");
    $('#redirectType').val("");

    $('#nofollow').removeAttr('checked');

    $('#saveRIP').show();
    $('#updateRIP').hide();
    $('#delete').hide();
});

$select.append($firstOption);

$(jsonResponse).each(function (index, o) {    
    var $option = $("<option/>");
    $option.attr("value", o.id);

    $option.on('click', function()  {
        $('#name').val(o.service_name);
        $('#serviceUrl').val(o.service_url);
        $('#prettyUrl').val(o.pretty_url);
        $('#redirectType').val(o.redirect_type);

        if (o.no_follow == 1)   {
            $('#nofollow').prop("checked", true);
        }
        else    {
            $('#nofollow').prop("checked", false);
        }

        $('#saveRIP').hide();

        $('#updateRIP').show();
        $('#delete').show();
    });

    $option.text(o.service_name);
    $select.append($option);
});

if ($("#serviceNameList option:selected").val() == 0)   {
    $('#saveRIP').show();

    $('#updateRIP').hide();
    $('#delete').hide();
}

这是 JSFiddle link- http://jsfiddle.net/6uy1quLg/5/ （在 Google Chrome 和 Firefox 上尝试运行看看区别）

从 fiddle 可以明显看出，填充组合框的代码工作正常，但是附加点击事件处理程序的代码似乎根本没有执行.

有人可以帮我解决这个问题吗？？提前致谢。

Answer 1

Select 的选项标签实际上没有或不能有点击事件，你必须做的是将 "change" 事件绑定到 select

你可以检查this related question让你的头脑清醒一点。

Answer 2

这是我会采用的方法，

使用 'change' 事件处理选项更改，使用 'data' 属性存储值。

http://jsfiddle.net/jmv1ck4r/3/

var string = '[{"service_url":"www.infibeam.com","service_name":"Infibeam Redirection","no_follow":0,"pretty_url":"infibeam","id":57,"redirect_type":"307"},{"service_url":"developer.mozilla.com","service_name":"Mozilla Developers Redirection","no_follow":0,"pretty_url":"mozilla-developers","id":53,"redirect_type":"301"},{"service_url":"www.snapdeal.com","service_name":"SnapDeal Redirection","no_follow":1,"pretty_url":"snapdeal","id":56,"redirect_type":"301"}]';

var jsonObj = JSON.parse(string);

var $select = $('#serviceNameList');
var $firstOption = $("<option/>");
$firstOption.attr("value", 0);
$firstOption.text("-Add New-");
$select.append($firstOption);

$(jsonObj).each(function (index, o) {    
    var $option = $("<option/>");
    $option.attr("value", o.id);    
    $option.text(o.service_name);
    //use data attr
    $option.data('service_name', o.service_name);
    $option.data('service_url',o.service_url);

    $select.append($option);
});

$select.on('change', function()
           {
               var selectedValue = $(this).val();

               if (selectedValue == 0)
               {
                   $('#name').val("");
                    $('#serviceUrl').val("");
                    $('#prettyUrl').val("");
                    $('#redirectType').val("");

                    $('#nofollow').removeAttr('checked');

                    $('#saveRIP').show();
                    $('#updateRIP').hide();
                    $('#delete').hide();
               }
               else
               {
                   var selectedOption = $(this).find(':selected');

                   $('#name').val($(selectedOption).data('service_name'));
                    $('#serviceUrl').val($(selectedOption).data('service_url'));
               }
           });

if ($("#serviceNameList option:selected").val() == 0)   {
    $('#saveRIP').show();   
    $('#updateRIP').hide();
    $('#delete').hide();
}

jQuery .on() 方法适用于 Firefox 但不适用于 Chrome

jQuery .on() method woking on Firefox but not on Chrome

html

javascript

firefox

jquery

google-chrome