Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat to do when $('#div').trigger('click'); doesn't trigger (Closed, lost interest)
    primarykey
    data
    text
    <p>I'm writing a userscript that injects a custom javascript into the head of a page. Easy peasy</p> <pre><code>// ==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); </code></pre> <p>The .js I inject makes use of the jQuery already being used on the page to make some css changes as well as automate some mundane tasks.</p> <p>What I want to happen is when I fire <code>$('#approve-all-button').click()</code> and it detects a username that it applies the RED background to, for the script to also click the Delete "button" as well.</p> <p>The code on the original site for the buttons looks like:</p> <pre><code>&lt;div class="jquery-buttongroup ui-buttonset"&gt; &lt;input type="radio" id="form-0-status_A" name="form-0-status" value="A" class="ui-helper-hidden-accessible"&gt; &lt;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"&gt; &lt;span class="ui-button-text"&gt;Approved&lt;/span&gt; &lt;/label&gt; &lt;input type="radio" id="form-0-status_I" name="form-0-status" value="I" checked="checked" class="ui-helper-hidden-accessible"&gt; &lt;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"&gt; &lt;span class="ui-button-text"&gt;Inactive&lt;/span&gt; &lt;/label&gt; &lt;input type="radio" id="form-0-status_D" name="form-0-status" value="D" class="ui-helper-hidden-accessible"&gt; &lt;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"&gt; &lt;span class="ui-button-text"&gt;Deleted&lt;/span&gt; &lt;/label&gt; &lt;/div&gt; </code></pre> <p>There are 100 iteration of the above button code. Each iterations set of IDs has a variable that increase by 1 for each iteration eg.</p> <p>id="form-0-status_D" </p> <p>id="form-1-status_D" </p> <p>id="form-2-status_D" </p> <p>id="form-3-status_D" </p> <p>id="form-4-status_D" </p> <p>The ID is being found by <code>$('#form-'+i+'-status_D')</code></p> <pre><code>$(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 &gt; 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 &lt;= 3 or &gt;= 15 Apply Color (Red) if ((nlen &lt;= 3) || (nlen &gt;= 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&lt;nlen; t++) { var chr = Current_Name.charAt(t); if (chr &gt;= "0" &amp;&amp; chr &lt;= "9") nDigits++; } var charcount = nlen - nDigits; if ((nDigits &gt;=6) || (charcount &lt; 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'); } }); }); </code></pre> <p>Again, what I want to happen is for when I click the Approve All div for it to loop though all of the and apply the default event (which is to set it to approve) unless a particular rule (username &lt;= 3 || >= 15 || etc) is triggered. In which case I would like the Delete button to be selected in stead. I am attempting to click the delete button with:</p> <p><code>$('#form-'+i+'-status_D').trigger('click');</code></p> <p>However, that does not seem to work.</p> <p>The problem(s) I seem to be having is the I am adding the click event to already has another click event tied to it that appears to supersede my event. I've tried to unbind the existing event; which does unbind successfully, but with it unbound I am unable to .trigger</p> <p>Is <code>trigger('click')</code> failing in this instance? Or do I have a hiccup in my code some where.</p> <p>While sifting though the source on the page I did find this linked javascript page</p> <pre><code>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 &amp;&amp; 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 &lt; actionCheckboxes.length; i++) { actionCheckboxes[i].checked = checked; Actions.toggleRow(actionCheckboxes[i].parentNode.parentNode, checked); } } }; addEvent(window, 'load', Actions.init); </code></pre> <p>When a Label/Input Radio is clicked Google Chrome (via inspect this element) tells me that script is called. (I dont know if that information helps any, but reading it is beyond my scope with the limited knowledge I have of jQuery)</p> <p>Also to clear up any confusion I am simply adding the <code>AddApproved/AddInactive/AddDeleted</code> class for tallying purposes. </p> <p>I have yet to implement the counter for this, but I already know how I am going to make that work.</p> <p>P.S. This is my first time using jQuery, so this is as much as a tool for my place of employment as it is a learning experience. If some of the code seems nOOby I do apologize.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload