Question

我有这个表结构：

<table class="table table-datatable table-custom dataTable" id="basicDataTable" aria-describedby="basicDataTable_info" style="width: 1732px;">
    <thead>
       ...some tr...
    </thead>
    <tbody role="alert" aria-live="polite" aria-relevant="all">
         <tr class="odd" id="1">
             <td class=" sorting_1" style="color: rgb(255, 255, 255);">1</td>
             <td class="" style="color: rgb(255, 255, 255);">My Custom string</td>
             <td class>
                 <button type="button" class="btn btn-danger delete row-delete" title="Delete"><i class="fa fa-cogs-remove fa-2x"></i></button>
                 <button type="button" id="row-restart" class="btn btn-success row-restart" title="Restart"><i class="fa fa-cogs-refresh fa-2x"></i></button>
             </td>
         </tr> 
    </tbody>
</table>

我需要当我按下长按（在id“row-restart”按钮上更多地说1秒）来触发消息....我添加了这个javascript代码，当它是多次点击按钮时的第1个按钮＃row-restart to fire消息..但问题是，如果我点击另一个按钮（删除）或点击它每次触发的表...这是我尝试使用javascript：

        /* DEFINE - variables */
        var start = 0;

        /* RESTART - long click */
        $('#basicDataTable').on('mousedown', 'button#row-restart', function(e) {
            console.log('long click...')
            /* DEFAULT - disable event */
            e.preventDefault();
            window.type = 1;
            start = new Date().getTime();
        }).on('mouseup', function(e) {
            /* DEFAULT - disable event */
            e.preventDefault();
            if (new Date().getTime() >= (start+1000)) {
                window.type = 2;
                $('#basicDataTable button#row-restart').click();
            }
        }).on('mouseleave', function(e) {
            window.type = 1;
            start = 0;
        });

那么我怎样才能指定只在按钮重启上进行长按？（ID = “行重启动”）？

更新：

对于相同的按钮ID，我有两个相同的事件触发器，这可能是问题吗？

$('#basicDataTable').on('click', 'button#row-restart', function(e) {
            /* DEFAULT - disable event */
            e.preventDefault();
})

$('#basicDataTable').on('mousedown', 'button#row-restart', function(e) {

})

你看到常见的是同一个按钮id'＃basicDataTable'和'button＃row-restart'但不同的只是click和mousedown ..可能jQuery误解了这个并在每个表行触发事件并点击了不同的按钮？

Answer 1

将此添加到您的jquery

=IIf(Fields!DeviceTag.Value <> Previous(Fields!DeviceTag.Value), "Yellow", "White")

Answer 2

尝试这个，但不建议这样做，因为该表是动态的，因此Button的Id将动态更改

$(function(){
var start = 0;
$('#row-restart').on('mousedown', function(e) {
            //console.log('long click...')
            /* DEFAULT - disable event */
            e.preventDefault();
            window.type = 1;
            start = new Date().getTime();
        }).on('mouseleave', function(e) {
            window.type = 1;
            start = 0;
        }).on('mouseup', function(e) {
            /* DEFAULT - disable event */
            e.preventDefault();
            if (new Date().getTime() >= (start+1000)) {
                window.type = 2;
                $('#basicDataTable #row-restart').click();
              alert("long press");
            }else{
              alert("short press");
            }
        });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table table-datatable table-bordered table-custom dataTable" id="basicDataTable" aria-describedby="basicDataTable_info" border="1">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody role="alert" aria-live="polite" aria-relevant="all">
         <tr class="odd" id="1">
             <td class=" sorting_1" style="color: rgb(255, 255, 255);">1</td>
             <td class="" style="color: rgb(255, 255, 255);">My Custom string</td>
             <td class>
                 <button type="button" class="btn btn-danger delete row-delete" title="Delete"><i class="fa fa-cogs-remove fa-2x">Delete</i></button>
                 <button type="button" id="row-restart" class="btn btn-success row-restart" title="Restart"><i class="fa fa-cogs-refresh fa-2x">Restart</i></button>
               
             </td>
         </tr> 
    </tbody>
</table>

Answer 3

经过多次试验和错误以及你的帮助后，我终于开始工作了：

解决方案是将其添加到现有的比较中：

&& start !== 0

所以javascript中的最终代码是：

 /* DEFINE - variables */
    var start = 0;

    /* RESTART - long click */
    $('#basicDataTable').on('mousedown', 'button#row-restart', function(e) {
        console.log('long click...')
        /* DEFAULT - disable event */
        e.preventDefault();
        window.type = 1;
        start = new Date().getTime();
    }).on('mouseup', function(e) {
        /* DEFAULT - disable event */
        e.preventDefault();
        if (new Date().getTime() >= (start+1000) && start !== 0) {
            window.type = 2;
            start = 0;
            $('#basicDataTable button#row-restart').click();
        }
    }).on('mouseleave', function(e) {
        window.type = 1;
        start = 0;
    });

现在它会在行重启按钮上触发，并且在点击表格或其他按钮时不会触发此按钮。像魅力

jQuery longclick在表格中触发，其他按钮在表格行中触发

3 个答案: