Question

我正在尝试在我的网页上创建一个特定的功能，它使用jQuery迭代JSON对象，使用其值填充组合框，并使用jQuery＆＃39; s将单击事件处理程序附加到选项{1}}方法。

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

以下是我的网页的HTML代码段

.on()

以下是完成所有工作的jQuery代码

<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>

这是JSFiddle链接 - http://jsfiddle.net/6uy1quLg/5/ （尝试在Google Chrome和Firefox上运行它以查看差异）

从小提琴中可以明显看出，填充组合框的代码工作正常，但代码连接点击事件处理程序似乎根本没有执行。 < / p>

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

Answer 1

选择的选项标签实际上没有或可能有点击事件，你必须做什么才能绑定＆＃34;更改＆＃34;事件到选择

您可以查看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上

2 个答案: