Databases
StackOverflow2013
Postsdbo
POjQuery 1.7.2 and IE7 on() doesn't seem to fire for selects
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery 1.7.2 and IE7 on() doesn't seem to fire for selects
    primarykey
    data
    text
    <p>I have a table of rows where are dynamically added, but for some reason the <code>on()</code> event doesn't seem to fire when I change the value of a select.</p> <p>For simplicity, I wrote the following <a href="http://jsfiddle.net/CVNky/1/" rel="nofollow">jsFiddle</a>. This is a VERY simplistic example of what I am doing. I do have to note that I was unable to verify if the jsFiddle failed the same way in IE7 because jsFiddle does not seem to work in IE7 at all.</p> <p>The basics of my code are this...</p> <p>First, the page loads with 1 or more of these rows, which represent a complex "subform" to be posted to Spring MVC. The subform has a group of 5 <code>SELECT</code> tags that have an event handler attached at the top <code>TABLE</code> as such:</p> <pre><code>$('#parentTable').on('change', 'div.additional div[class^="additional"] select', function() { // ...enable/disable siblings according to value } </code></pre> <p>At the bottom of the table is an <strong>Add</strong> button. When the user clicks it, I take the last visible row, clone it, use regex to <em>fix</em> the index on the name/id, and set all the fields blank and disables except one field, which is used to do a lookup. This all has the appearance of working.</p> <p>The user enters a value in the lookup field, clicks <strong>Lookup</strong>, which performs an AJAX call, filling in the subform then calling the change on the selects to set their default state like so:</p> <pre><code>$subTable.find(':input:not(:button)').change(); </code></pre> <p>This fires the above <code>on()</code> as expected. However, if I physically click on the resulting <code>SELECT</code>s and change their values the <code>on()</code> event handler is not called.</p> <p>I have verified that the resulting cloned table row looks/smells/feels correct, at least from using IE8's Developer Tools (I have IE8 in IE7 compatibility mode for testing, because IE7 has VERY limited testing and the problem seems to be present there too). When I run this in Chrome it works perfectly fine, however I am aware the clone is technically working differently.</p> <p>Any help would be appreciated.</p> <p><strong>Update</strong></p> <p>I tried swapping the selector to drop the class attr as suggested below:</p> <pre><code>$('#parentTable').on('change', 'div.additional div select', function() { // ...enable/disable siblings according to value } </code></pre> <p>And I tried all caps like the referenced post:</p> <pre><code>$('#parentTable').on('change', 'div.additional div[class^="ADDITIONAL"] select', function() { // ...enable/disable siblings according to value } </code></pre> <p>The first worked the same way, the second did nothing at all (disabled all <code>on()</code> change handling).</p> <p>Will continue to play with this until I get it working. There has to be something simple going wrong here.</p> <p><strong>Update 2</strong></p> <pre><code>I tried adding a class to all the `SELECT`s, and added the following two: $('select.addedClass').on('change', function() { alert("Select change:" + $(this).val()); }); $('#parentTable').on('change', 'select.addedClass', function() { alert("Select change 2:" + $(this).val()); }); </code></pre> <p>Here is the process I performed:</p> <ol> <li>Reloaded page, both alerts fire for the single row there</li> <li>Added a row</li> <li>Performed AJAX lookup, which calls <code>$addedTable.find(':input:not(:button)').change();</code> as described above, both events fire</li> <li>Change the value of one of the selects, neither alert fires.</li> </ol> <p>I would expect the first to fail, since the event listener is connected directly to the <code>SELECT</code> and not a higher level parent, but the second one fails the same way. So, in the Developer Tools, I tried to run the following:</p> <pre><code>$('#order.itemList1.additionalLine1').change() </code></pre> <p>Which is the ID of one of the selects I added, and still nothing fired. It's as if the event handler is ignoring all added <code>SELECT</code>s.</p> <p>To make sure the select was working on the <code>on()</code>, I did this in the console after I added the new row:</p> <pre><code>$('#parentTable').find('div.additional div[class^="additional"] select').each(function() { alert($(this).attr('name') + '(' + $(this).prop('id') + ')' + ' : ' + $(this).val()); }); </code></pre> <p><strong>Update 3</strong></p> <p>I ended up putting in a horrible hack that, for IE7 only, drops and re-adds the change handler directly on the <code>SELECT</code>s. It's ugly, but I have to support IE7, so...</p> <p>I am leaving this open to see if anyone has a better solution, or might know why it's not working.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCodeChimp
    1. USCodeChimp
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery 1.7.2 and IE7 on() doesn't seem to fire for selects
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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