Javascript 点击事件在 Google Chrome 中不起作用？

Question

我有一个搜索功能，用户可以在其中选择日期范围和搜索框（如果需要），并将查询结果动态加载到 HTML div 元素中。显示结果时，有一个选择框可以选择要排序的字段。当用户选择一个字段时，它会触发另一个 AJAX 请求，该请求再次将页面“动态地重新加载”到 div 元素中，并按所选字段对结果进行排序。我目前使用的方法在 Mozilla Firefox 下运行良好，但在 Google Chrome 下无法运行。

这里是处理AJAX请求的JS文件：

/*========================================================
    sendServiceRequest.js: handles ajax request for
    dynamically loading data
*/
function sendServiceRequest(file, nvpSendData, successCallback, failCallback) {
    $.ajax({
        type: "POST",
        url: file,
        data: nvpSendData,
        dataType: 'html'
    }).success(function(data, status) {
        console.log(".done");
        console.log("Return AJAX status: " + status);
        //console.log("success data: " + JSON.stringify(data));
        successCallback(data, status);
    }).fail(function(data, status, error) {
        console.log(".fail");
        console.log("Return AJAX status: " + status);
        //console.log("Return data: " + JSON.stringify(data));
        failCallback(data, status, error);
    });
}


function sendSortServiceRequest(searchType, fromDate, toDate, searchString, column, order) {
    sendServiceRequest(
        "/search/get_content.php",
        {action:"sort", search_type:searchType, from_date:fromDate, to_date:toDate, search_str:searchString, col:column, order:order},
        function(data, status) {
            $('#results-container').html(data);
        },
        function(data, status, error) {
          console.log(".fail");
          console.log("Return AJAX status: "+status);
        }
    );
}

第一个函数 sendServiceRequest() 是最初将搜索结果加载到 div 元素中的函数。

下面是动态加载到 div 元素中的代码片段，div 元素是在单击选项时触发事件的选择元素：

<div class="col-sm-9" align="right">
                <label for="charge_auth_sort_select">Sort By:</label>
            </div>
            <div class="col-sm-3" style="padding:0;margin:0;">
                <select class="sort_select" id="charge_auth_sort_select" style="width:100%; padding:0; margin:0;">
                <!-- selection options with datasets for identifying column and order for sorting -->
                    <option onClick="sendSortServiceRequest('charge-auth', '<?php echo $fromDate; ?>', '<?php echo $toDate; ?>', '<?php echo $searchString; ?>', 0, '<?php echo $sortArgs[0]['order']; ?>')">
                        Status
                    </option>
                    <option onClick="sendSortServiceRequest('charge-auth', '<?php echo $fromDate; ?>', '<?php echo $toDate; ?>', '<?php echo $searchString; ?>', 1, '<?php echo $sortArgs[1]['order']; ?>')">
                        Order ID
                    </option>
                    <option onClick="sendSortServiceRequest('charge-auth', '<?php echo $fromDate; ?>', '<?php echo $toDate; ?>', '<?php echo $searchString; ?>', 2, '<?php echo $sortArgs[2]['order']; ?>')">
                        User ID
                    </option>
                    <option onClick="sendSortServiceRequest('charge-auth', '<?php echo $fromDate; ?>', '<?php echo $toDate; ?>', '<?php echo $searchString; ?>', 3, '<?php echo $sortArgs[3]['order']; ?>')">
                        Order Date
                    </option
                    <option onClick="sendSortServiceRequest('charge-auth', '<?php echo $fromDate; ?>', '<?php echo $toDate; ?>', '<?php echo $searchString; ?>', 4, '<?php echo $sortArgs[4]['order']; ?>')">
                        Last Updated
                    </option>
                    <option onClick="sendSortServiceRequest('charge-auth', '<?php echo $fromDate; ?>', '<?php echo $toDate; ?>', '<?php echo $searchString; ?>', 5, '<?php echo $sortArgs[5]['order']; ?>')">
                        Insurance Type
                    </option>
                    <option onClick="sendSortServiceRequest('charge-auth', '<?php echo $fromDate; ?>', '<?php echo $toDate; ?>', '<?php echo $searchString; ?>', 6, '<?php echo $sortArgs[6]['order']; ?>')">
                        Delivery Method
                    </option>
                </select>
            </div>

因此，在结果加载到“父”页面的 div 元素后，用户可以从选择列表中选择一个字段选项。当用户单击该选项时，它应该触发 sendSortServiceRequest() 函数，将结果重新加载到元素中，并按所选字段排序。

同样，这在 Firefox 下工作得很好，但不想在 Chrome 下工作。我已经坚持了很长一段时间了。任何帮助将不胜感激。

Answer 1

我改变了处理点击事件的方式，并且它起作用了。我在父页面中使用 jquery click 事件，而不是动态加载元素上的“onclick”方法。

$('#results-container').on('change', '.fieldsort', function() {
    var opt = $('.fieldsort :selected');
    sendServiceRequest(
            '/search/get_content.php',
            {action:opt.attr('data-action'), search_type:opt.attr('data-searchtype'), from_date:opt.attr('data-fromdate'), to_date:opt.attr('data-todate'), search_str:opt.attr('data-searchstr'), col:opt.val(), order:opt.attr('data-order')},
            function (data, status) {
                $('#results-container').html(data);
            },
            function (data, status, error) {
                console.log('.fail');
                console.log('Return AJAX status: '+status);
            }
    );
});

此外，选择选项上的点击事件似乎在谷歌浏览器中不起作用。至少我根本无法让他们工作。