Databases
StackOverflow2013
Postsdbo
POHow to make an element only clickable once and the others remain clickable for an action?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make an element only clickable once and the others remain clickable for an action?
    primarykey
    data
    text
    <p>This is a dynamically created filter list. Clicking on the Account link opens up a modal window with a list of the account names. Clicking on an account name causes a li element to appear in the filter sidebar. The problem is you are able at this moment to click on the link more than once and created an element even if it was the same information. What I need it to do is create an li only once per account listing. I have thought about using the not () selector and adding a class at the end of the action when an account name is clicked. The issue is they all share the same class of .account which is how JQuery is carrying out the action upon click. My question is first how do I get this to work because my not () line isn't firing. Secondly, how do I get it to target only the one item that the user clicked on as opposed to all links with the class of account? This is the JSFiddle, but for some reason it doesn't want to quite work because there is a lot of code from Bootstrap from the site: <a href="http://jsfiddle.net/rsxavior/puhdE/7/" rel="nofollow">http://jsfiddle.net/rsxavior/puhdE/7/</a></p> <p>This is the relevant code I am referring to:</p> <pre><code>&lt;li&gt; &lt;a href="#accountModal" data-toggle="modal"&gt;Accounts&lt;/a&gt; &lt;!--Start Account Sort Modal--&gt; &lt;div class="modal hide" id="accountModal" tabindex="-1" role="dialog" aria-labelledby="accountLabel" aria-hidden="true"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt; &lt;hgroup&gt; &lt;h4 id="accountLabel"&gt;Accounts&lt;/h4&gt; &lt;h6&gt;(Choose an account's first letter to quickly sort)&lt;/h6&gt; &lt;/hgroup&gt; &lt;ul class="nav nav-pills"&gt; &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;C&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;D&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;E&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;F&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;G&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;H&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;I&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;J&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;K&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;L&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;M&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;N&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;O&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;P&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Q&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;R&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;S&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;T&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;U&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;V&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;W&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Y&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Z&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;ul&gt; &lt;li class="account"&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/li&gt; &lt;li class="account"&gt;&lt;a href="#"&gt;A Name&lt;/a&gt;&lt;/li&gt; &lt;li class="account"&gt;&lt;a href="#"&gt;Another Account Name&lt;/a&gt;&lt;/li&gt; &lt;li class="account"&gt;&lt;a href="#"&gt;Babcock Center&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;ul class="pager"&gt; &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul class="account-hidden-li"&gt;&lt;/ul&gt; &lt;/li&gt; </code></pre> <p>And the JQuery going along with it:</p> <pre><code>$('.account:not('.selected-account')').click(function () { $('.account-hidden-li').append('&lt;li class="account-select"&gt;Sample Account Name&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;&lt;/li&gt;'); $('.account').addClass('selected_account'); )}; </code></pre> <p>Any help in this matter would be greatly appreciated!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAsciiom
    1. USTiffani
    plurals
    1. This table or related slice is empty.
    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. POHow to make an element only clickable once and the others remain clickable for an action?
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POHow to make an element only clickable once and the others remain clickable for an action?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COcan I suggest that you spend more time isolating the problem, rather than dumping all of your code for the community to trawl through. You'll get a much more active response.
      singulars
      1. POHow to make an element only clickable once and the others remain clickable for an action?
      1. USMild Fuzz
    2. COI have changed the fiddle to be the bare minimum amount of coding to get it functioning on a screen.
      singulars
      1. POHow to make an element only clickable once and the others remain clickable for an action?
      1. USTiffani
    3. COI wouldn't agree. You can definitely replicate the issue with around 5% of that code. There is a lot of redundancy.
      singulars
      1. POHow to make an element only clickable once and the others remain clickable for an action?
      1. USMild Fuzz
 

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