StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It doesn't. That is not possible.</p> <p>So, there are some possible reasons that it might seem so:</p> <ul> <li><p>The code that actually runs doesn't look like that. It might be an older version that is cached, or you are looking in the wrong file.</p></li> <li><p>The code runs more than once, that way both execution branches may run. (Although I can't really see any possibility for that here.)</p></li> <li><p>You are misinterpreting the result, and whatever you see that leads to the conclusion that both branches have to be executed, is in fact caused by some other code.</p></li> </ul> <p>You could use a debugger to set breakpoints in the code. Set one breakpoint before the condition, and one in each branch. Then you will see if the code runs twice, once or not at all.</p> <h3>Edit:</h3> <p>The alerts that you added to the code shows that the event is actually called twice, and the first time the values are not what you think that they are.</p> <p>Add some code to try to find out where the event is invoked from. Catch the event object by adding it to the function signature: <code>.blur(function(e) {</code>. Then you can use e.currentTarget to get the element that triggered the event, and display some attributes from it (like it's id) to identify it.</p> <h3>Edit 2:</h3> <p>I am curios about this line:</p> <pre><code>$(product_calendar).attr({ value: newRemove_val }); </code></pre> <p>Do you create the variable <code>product_calendar</code> somewhere, or did you mean:</p> <pre><code>$('input[name=product_calendar}').attr({ value: newRemove_val }); </code></pre> <h3>Edit 3:</h3> <p>Seeing the complete code, the cause of the double execution is clear. You are adding even handlers inside an event handler, which means that another handler is added every time.</p> <p>The reason for <code>attr_val</code> not working properly is because it's created as a local variable in one function, and then unsed in another function.</p> <p>Add the blur handlers from start instead, and they occur only once. Declare the variable outside the function.</p> <p>Some notes:</p> <ul> <li>You can use the <code>val</code> function instead of accessing the <code>value</code> attribute using the <code>attr</code> function.</li> <li>When you assign <code>$(this)</code> to <code>product_calendar</code>, it's a jQuery object. You don't have to use <code>$(product_calendar)</code>.</li> <li>The removal doesn't match complete values, so you can add <code>12</code> and <code>2</code>, then remove <code>2</code> and you get <code>1</code> and <code>2</code> left.</li> </ul> <p><em>(this is a dummy text, because you can't have a code block following a list...)</em></p> <pre><code>// Complete behavioral script $(function() { // declare variables in outer scope var attr_val; var product_calendar; $('input[name=product_calendar]') .css({ 'color': '#5fd27d', 'cursor': 'pointer' }) .attr('readonly', 'readonly') // Additional formatting for specified fields .focus(function() { // Focus on any 'input[name=product_calendar]' executes function product_calendar = $(this); // Explicit declaration attr_val = product_calendar.val(); $('#calendar_addRemove input').val(''); // Clear input fields $('#calendar_addRemove').fadeIn(500); // Display input fields }); $('input[name=calendar_add]').blur(function() { // After value entered, action occurs on blur var add_val = $(this).val(); if (add_val != '') { product_calendar.val(attr_val + ' ' + add_val); } $('#calendar_addRemove').fadeOut(500); }); $('input[name=calendar_remove]').blur(function() { // After value entered, action occurs on blur var remove_val = $(this).val(); if (remove_val != '') { if (attr_val.indexOf(remove_val) != -1) { product_calendar.val(attr_val.replace(remove_val, '')); $('#calendar_addRemove').fadeOut(500); } else { $('#calendar_remove').append('<p class="error">Occurrence Not Found</p>'); $('.error').fadeOut(1500, function() { $(this).remove(); }); } } else { $('#calendar_addRemove').fadeOut(500); } }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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