Question

我有一个Html页面，我使用click事件。

Click事件用于DataTables。

这是我的代码：

function getStatistic10(dstart, dend, nam) {
var response;
var allstat10 = [];

if (typeof myTabLigne10 != 'undefined') {
    myTabLigne10.fnClearTable();
}

    $.ajax({
        type: 'GET',
        url: 'http://localhost:52251/Service1.asmx/Statistic_10_Entete',
        data: { "start": JSON.stringify(dstart), "end": JSON.stringify(dend), "name": JSON.stringify(nam) },
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            response = msg.d;
            var i=0, length = response.Items.length;
            for (; i < length; i++) {
                var j = 0;
                allstat10[i] = [response.Items[i].Nom, response.Items[i].Date, response.Items[i].Piece, response.Items[i].Tiers, number_format(response.Items[i].AmoutHT, 2, ',', ' '), number_format(response.Items[i].AmountTTC, 2, ',', ' '), response.Items[i].Quantite];
            }
            if (typeof myTabEntete10 != 'undefined') {
                myTabEntete10.$('tr').unbind("click");
                myTabEntete10.fnClearTable();
                myTabEntete10.fnAddData(allstat10);

            } else {
                fillDataTableEntete10(allstat10, dstart, dend);
            }

            $('body').on("click",'#table_statistic_10 tbody tr', function () {
                var data = myTabEntete10.fnGetData(this);
                $('tr').removeClass('row_selected');
                $(this).addClass('row_selected');
                loadData10(dstart, dend, data[2], data[3]);
            });

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("error loading statistic 10");
            alert("Status: " + textStatus + "\n" + "Error: " + errorThrown);
        }
    });
}

我的Html页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="Css/demo_table_jui_Stat6_Stat10.css" rel="stylesheet" />
<script src="../Scripts/json.js"></script>
<title></title>
</head>
<body>
<select id="Select1" name="D1" style="margin-right :50px; margin-left:20px">
    <option value="2">Last month</option>
    <option value="3" selected="selected">Last six months</option>
    <option value="1">All</option>
</select>
<select id="Select2" name="D1" style="margin-right :50px">
</select>
<script>
    $("#Select2").change(function () { selectStat10(Select2.options[Select2.selectedIndex].value) });
</script>
<script>
    $("#Select1").change(function () { selectStat10(Select1.options[Select1.selectedIndex].value) });
</script>
    <label for="from" style="font-size: 15px; margin-right:-50px">From</label>
    <input id="from" class="buttonStat6_10" type="text" name="from" disabled="disabled" style="margin-right: 50px"/>
    <label for="to" style="font-size: 15px; margin-right:-70px">To</label>
    <input id="to" class="buttonStat6_10" type="text" name="to" disabled="disabled" />

<br />
<br />
<br />
<table id="table_statistic_10" class="display">
    <caption class="caption">Detail van verkopen</caption>
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
<br />
<br />

<table id="table_statistic_10_ligne" class="display">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
<script type="text/javascript">
    fillSlectTagStat10();
</script>
</body>
</html>

我的selectTag函数（当我在select标签中选择一个值时调用getStatistic函数）：

function selectStat10(selectValue) {
var dstartSelect;
var dendSelect; 1
var response;
if (typeof myTabEntete10 != 'undefined') {
    $('#table_statistic_10 tbody tr').unbind("click");
}
if (selectValue == 1) {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:52251/Service1.asmx/getLastDateStat10',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            response = msg.d;
            dstartSelect = new Date(response);
            dendSelect = new Date();
            var startdateInput = dstartSelect.getDate() + "/" + (dstartSelect.getMonth() + 1) + "/" + dstartSelect.getFullYear();
            var enddateInput = dendSelect.getDate() + "/" + (dendSelect.getMonth() + 1) + "/" + dendSelect.getFullYear();
            var nam = $('#Select2').val();
            $("#from").val(startdateInput);
            $("#to").val(enddateInput);

            getStatistic10(dstartSelect, dendSelect, nam);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("error loading getlastDate statistic 6");
            alert("Status: " + textStatus + "\n" + "Error: " + errorThrown);
        }
    });

} else {
    if (selectValue == 2) {
        lastMonthStat10();
    } else {
        if (selectValue == 3) {
            lastSixMonthStat10();
        } else {
            var element = $("#from").val().split('/');
            var dstart = new Date();
            dstart.setDate(element[0]);
            dstart.setMonth(element[1] - 1);
            dstart.setFullYear(element[2]);
            dendSelect = new Date();
            var nam = $('#Select2').val();
            getStatistic10(dstart, dendSelect, nam);
        }
    }
}
}

第一次加载页面时，效果很好。 click事件始终被调用一次。当我在select标签中选择其他值然后单击时，我可以在FireBug中看到该事件被调用了2次。

当我仍然选择时，点击被叫3次然后4次......

为什么呢？我不明白。

Answer 1

每次执行Ajax调用时，都会将另一个函数绑定到click事件。您可以通过先清除所有事件然后重新添加它们来解决此问题。

替换

$('body').on("click",'#table_statistic_10 tbody tr', function () {
                var data = myTabEntete10.fnGetData(this);
                $('tr').removeClass('row_selected');
                $(this).addClass('row_selected');
                loadData10(dstart, dend, data[2], data[3]);
            });

与

$('#table_statistic_10 tbody tr').unbind('click');
$('#table_statistic_10 tbody tr').click(function () {
 var data = myTabEntete10.fnGetData(this);
 $('tr').removeClass('row_selected');
 $(this).addClass('row_selected');
 loadData10(dstart, dend, data[2], data[3]);
});

当我使用select标签时，会多次调用事件单击（Jquery）

1 个答案: