Databases
StackOverflow2013
Postsdbo
POWhy does my jQuery event handler fail when attached to multiple elements?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does my jQuery event handler fail when attached to multiple elements?
    primarykey
    data
    text
    <p>I am using jquery to add mulitple new "addTask" form elements to a "ul" on the page every time a link is clicked. </p> <pre><code> $('span a').click(function(e){ e.preventDefault(); $('&lt;li&gt;\ &lt;ul&gt;\ &lt;li class="sTitle"&gt;&lt;input type="text" class="taskName"&gt;&lt;/li&gt;\ &lt;li&gt;&lt;input type="button" value="saveTask" class="saveTask button"&gt;&lt;/li&gt;\ &lt;/ul&gt;\ &lt;/l1&gt;') .appendTo('#toDoList'); saveTask(); }); </code></pre> <p>These new nested ul elements all have an button with the same class "saveTask". I then have a function that allows you to save a task by clicking on an button with the class "saveTask".</p> <pre><code>// Save New Task Item function saveTask() { $('.saveTask').click(function() { $this = $(this); var thisParent = $this.parent().parent() // Get the value var task = thisParent.find('input.taskName').val(); // Ajax Call var data = { sTitle: task, iTaskListID: 29 }; $.post('http://localhost:8501/toDoLists/index.cfm/Tasks/save', data, function(data) { var newTask = '&lt;a&gt;' + task + '&lt;/a&gt;' thisParent.find('li.sTitle').html(newTask); }); return false; }); } </code></pre> <p>This essentially allows the user to enter some text into a form input, hit save, and then the task gets saved into the database using ajax, and displayed on the page using jQuery. </p> <p>This works fine when there is only one element on the page with the class "saveTask", but if I have more than 1 form element with the class "saveTask" it stops functioning correctly, as the variable "var task" shows as "undefined" rather than the actual value of the form input.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USnamtax
    1. USnamtax
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhy does my jQuery event handler fail when attached to multiple elements?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWhy does my jQuery event handler fail when attached to multiple elements?
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POWhy does my jQuery event handler fail when attached to multiple elements?
      1. USsmartcaveman
      1. VTFavorite
    1. COShow your markup, please. I *suspect* that you're depending on a structure that doesn't exist for all elements with the class `saveTask`...
      singulars
      1. POWhy does my jQuery event handler fail when attached to multiple elements?
      1. USShog9
    2. COHi there...I have a ul on the page, and then nested uls driven by a coldfusion loop for each task...you can then click on a link to add more tasks to the page. So when you click it adds the following html to the main ul, <li><ul><li><input type="text" class="taskName"></li><li><input type="button class="saveTask button"></li></ul></li> You then input your task name into the form, and hit the button and it saves to the database and updates the page via ajax. Thanks
      singulars
      1. POWhy does my jQuery event handler fail when attached to multiple elements?
      1. USnamtax
    3. COI have also noticed that if I add multiple addTask form elements to the page the first form added will function propely and do the ajax call for that form input only. However the second form added will do the ajax call twice and return undefined, the third form will do the ajax call three times and return undefind etc etc. Thanks
      singulars
      1. POWhy does my jQuery event handler fail when attached to multiple elements?
      1. USnamtax
 

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