$('#div').trigger('click'); 时该怎么办不触发（关闭，失去兴趣）

Question

我正在编写一个用户脚本，将自定义 JavaScript 注入到页面的头部。 Easy peasy

// ==UserScript==
// @name    *** (BLOCKED DUE TO NDA)
// @namespace   *** (BLOCKED DUE TO NDA)
// @description *** (BLOCKED DUE TO NDA)
// @include *** (BLOCKED DUE TO NDA)
// @author  Aaron K. Henderson
// @version 1.0
// ==/UserScript==

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= '***.js';
head.appendChild(script);

我注入的 .js 利用页面上已经使用的 jQuery 来进行一些 css 更改以及自动执行一些日常任务。

我想要发生的是，当我触发 $('#approve-all-button').click() 时，它会检测到应用红色背景的用户名，以便脚本也单击删除“按钮”也是如此。

按钮的原始站点上的代码如下所示：

<div class="jquery-buttongroup ui-buttonset">
    <input type="radio" id="form-0-status_A" name="form-0-status" value="A" class="ui-helper-hidden-accessible">
    <label for="form-0-status_A" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false">
        <span class="ui-button-text">Approved</span>
    </label>
    <input type="radio" id="form-0-status_I" name="form-0-status" value="I" checked="checked" class="ui-helper-hidden-accessible">
    <label for="form-0-status_I" class="ui-state-active ui-button ui-widget ui-state-default ui-button-text-only" aria-pressed="true" role="button" aria-disabled="false">
        <span class="ui-button-text">Inactive</span>
    </label>
    <input type="radio" id="form-0-status_D" name="form-0-status" value="D" class="ui-helper-hidden-accessible">
    <label for="form-0-status_D" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false">
        <span class="ui-button-text">Deleted</span>
    </label>
</div>

上述按钮代码有 100 次迭代。 ID 的每个迭代集都有一个变量，每次迭代都会增加 1，例如。

id="form-0-status_D"

id="form-1-status_D"

id="form-2-status_D"

id="form-3-status_D"

id="form-4-status_D"

正在查找 ID通过 $('#form-'+i+'-status_D')

$(document).ready(function() {
    // Rename Approve All Button
    $('#approve-all-button span').text('Scan + Detect');

    // The Magic
    $('#approve-all-button').click(function(i) {
        i.preventDefault();
        var Current_Name = '';
        // Loop through TR
        $('tr').each(function(i) {
            if (i > 0) {
                var _self = $(this)
                // Get Current Username in Loop
                Current_Name = _self.children('.username').text();
                // Apply Default Color to All (Green)
                _self.css('background-color', '#0AFE47');
                // Apply Approved Class to All
                _self.addClass('AddApproved');
                // Hide Creation Date / Last Login
                _self.children('.nowrap').css('opacity','.1').css('background-color','white');
                // Get Current Username Length
                var nlen = Current_Name.length;

                // If Name Length is <= 3 or >= 15 Apply Color (Red)
                if ((nlen <= 3) || (nlen >= 15)){
                    _self.css('background-color','#FF7575').
                        addClass('AddDeleted').
                        removeClass('AddApproved').
                        removeClass('AddInactive');
                    $(_self).children('#form-'+i+'-status_D').trigger('click');
                }


                var nDigits = 0;
                for ( var t=0; t<nlen; t++) {
                    var chr = Current_Name.charAt(t);
                    if (chr >= "0" && chr <= "9") nDigits++;
                }
                var charcount = nlen - nDigits;

                if ((nDigits >=6) || (charcount < 3) || (nDigits == nlen))  { 
                    _self.css('background-color','#FF7575').
                        addClass('AddDeleted').
                        removeClass('AddApproved').
                        removeClass('AddInactive');
                    $(_self).children('#form-'+i+'-status_D').trigger('click');
                }
            }
        });
    });
        // On Button Click, Change Background and Add/Remove class
        $('label').click(function(i) {
            var _self = $(this)
            var button = _self.attr('for');
            var status =  button.substring(button.lastIndexOf('-') + 1);
            if (status == 'status_D') {
                _self.closest('tr').css('background-color','#FF7575').
                    addClass('AddDeleted').
                    removeClass('AddApproved').
                    removeClass('AddInactive');
            } else if (status == 'status_A') {
                _self.closest('tr').css('background-color','#0AFE47').
                    addClass('AddApproved').
                    removeClass('AddInactive').
                    removeClass('AddDeleted');
            } else if (status == 'status_I') {
                _self.closest('tr').css('background-color','#0AFE47').
                    addClass('AddInactive').
                    removeClass('AddApproved').
                    removeClass('AddDeleted');
            }

        });
});

再次，我想要发生的是当我单击 Approve All div 时，它会循环遍历所有和应用默认事件（将其设置为批准），除非触发特定规则（用户名 <= 3 || >= 15 || 等）。在这种情况下，我希望选择“删除”按钮。 我尝试使用以下命令单击删除按钮：

$('#form-'+i+'-status_D').trigger('click');

但是，这似乎不起作用。

我似乎遇到的问题是，我将点击事件添加到已经有另一个与其绑定的点击事件，该事件似乎取代了我的事件。我尝试解除现有事件的绑定；它确实成功解除绑定，但解除绑定后我无法 .trigger

在这种情况下 trigger('click') 是否失败？或者我的代码中是否有某个地方出现了问题。

在筛选页面上的源代码时，我确实找到了这个链接的 javascript 页面，

var Actions = {
    init: function() {
        var selectAll = document.getElementById('action-toggle');
        if (selectAll) {
            selectAll.style.display = 'inline';
            addEvent(selectAll, 'click', function() {
                Actions.checker(selectAll.checked);
            });
        }
        var changelistTable = document.getElementsBySelector('#changelist table')[0];
        if (changelistTable) {
            addEvent(changelistTable, 'click', function(e) {
                if (!e) { var e = window.event; }
                var target = e.target ? e.target : e.srcElement;
                if (target.nodeType == 3) { target = target.parentNode; }
                if (target.className == 'action-select') {
                    var tr = target.parentNode.parentNode;
                    Actions.toggleRow(tr, target.checked);
                }
            });
        }
    },
    toggleRow: function(tr, checked) {
        if (checked && tr.className.indexOf('selected') == -1) {
            tr.className += ' selected';
        } else if (!checked) {
            tr.className = tr.className.replace(' selected', '');
        }  
    },
    checker: function(checked) {
        var actionCheckboxes = document.getElementsBySelector('tr input.action-select');
        for(var i = 0; i < actionCheckboxes.length; i++) {
            actionCheckboxes[i].checked = checked;
            Actions.toggleRow(actionCheckboxes[i].parentNode.parentNode, checked);
        }
    }
};

addEvent(window, 'load', Actions.init);

当单击标签/输入单选按钮时，Google Chrome（通过检查此元素）告诉我调用了脚本。 （我不知道这些信息是否有帮助，但由于我对 jQuery 的了解有限，阅读它超出了我的范围）

另外为了消除任何混乱，我只是添加 AddApproved/AddInactive/AddDeleted 类用于统计目的。

我还没有为此实现计数器，但我已经知道如何使其工作。

PS 这是我第一次使用 jQuery，所以这既是我工作场所的一个工具，也是一次学习经历。如果某些代码看起来不太好，我深表歉意。

Answer 1

trigger() 在将事件绑定到元素时起作用。引用自 jQuery 文档网站：

使用 .bind() 或其快捷方式之一附加的任何事件处理程序
当相应的事件发生时，方法就会被触发。他们可以是
但是，使用 .trigger() 方法手动触发

在您的情况下，订阅 #form-1-status_D 上的点击事件并在那里编写必要的代码，现在您可以调用 call trigger( '点击'） 一起。

请记住，当您更改 div ID 时，只需订阅该 div 一次即可。

Answer 2

你有这个：

var _self = $(this);
$(_self).children('#form-'+i+'-status_D').trigger('click');

第二行应该是：

_self.children('#form-'+i+'-status_D').trigger('click');

你的变量_self已经通过$(this)引用了jQuery，所以不应该像$(_self)<那样使用/code> 与 $($(...)) 相同