Question

我遇到无限循环问题..至少我是这么认为的。

我正在通过Ajax生成一个表。表格行包含一个带缩略图和一些文本的按钮。当我点击TableRow时，我想要点击TableRow中的按钮。如果我不使用.one（“点击”），我会得到一个无限循环。

我不想用。一，因为当您通过“返回”按钮重新访问该网站时，您无法点击另一个TableRow。

HTML：

<form method = 'post' action = 'view.cfm'>
    <table class = 'result_table'>
        <tr>
            <th></th>
            <th>Thumbnail</th>
            <th>Dateityp</th>
            <th>Titel</th>
            <th>Dateiname</th>
            <th>Dateigröße</th>
        </tr>
        <tr class = 'rowClickable'>
            <td></td>
            <td><button type = 'submit' class = 'thumbnail_button' name = 'id_media' value = '1005'><img class = 'thumbnail' alt = 'Medium öffnen' src = 'thumb_placeholder.jpg'></button></td>
            <td>Präsentation</td>
            <td>fe wf we</td>
            <td>Hallo.pptx</td>
            <td>null</td>
        </tr>
    </table>
</form>

JQuery的：

$("body").one("click", ".rowClickable", function() {
    console.log($(this).find("button").val());
    $(this).find("button").trigger("click");
});

像这样一切正常。只是我不想使用.one（“点击”）。

Answer 1

正如here

所解释的那样

$("body").on("click", ".rowClickable", function(event) {
    console.log($(this).find("button").val());
    $(this).find("button").trigger("click");
    $( this ).off( event );

});

你可以使用off来应用相同的效果..

Answer 2

将您的功能更新为：

$("body").on("click", ".rowClickable", function() {
    console.log($(this).find("button").val());
    $(this).find("button").click(function(e){
        e.stopPropagation();
    }).trigger("click");
});

<强>已更新：

$("body").on("click", ".rowClickable", function() {
    console.log($(this).find("button").val());
    $(this).find("button").trigger("click");
});

$('.rowClickable').find('button').click(function(e){
  e.stopPropagation();
});

更新1 ：

$("body").on("click", ".rowClickable", function() {
    console.log($(this).find("button").val());
    $(this).find("button").off('click').click(function(e){
        e.stopPropagation();
    }).trigger("click");
});

请参阅Fiddle

＆＃13;

$("body").on("click", ".rowClickable", function() {
    console.log($(this).find("button").val());
    $(this).find("button").trigger("click");
});

$('.rowClickable').find('button').click(function(e){
  e.stopPropagation();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method = 'post' action = 'view.cfm'>
    <table class = 'result_table'>
        <tr>
            <th></th>
            <th>Thumbnail</th>
            <th>Dateityp</th>
            <th>Titel</th>
            <th>Dateiname</th>
            <th>Dateigröße</th>
        </tr>
        <tr class = 'rowClickable'>
            <td></td>
            <td><button type = 'submit' class = 'thumbnail_button' name = 'id_media' value = '1005'><img class = 'thumbnail' alt = 'Medium öffnen' src = 'thumb_placeholder.jpg'></button></td>
            <td>Präsentation</td>
            <td>fe wf we</td>
            <td>Hallo.pptx</td>
            <td>null</td>
        </tr>
    </table>
</form>

＆＃13;

桌面上的JQuery无限循环点击

2 个答案: