jquery function first run after two click

Question

when I load page selText() run only after two click and then it works fine but if refresh page i need to click twice again

<a href="javascript: selText();" class="select">click</a>
<input type="text"  value="value" />

<a href="javascript: selText();" class="select">click</a>
<input type='text'  value='value' />

<a href="javascript: selText();" class="select">click</a>
<input type="text"  value="value" />




function selText() {
        $(".select").click(function () { $(this).nextUntil("a").select(); });
    }

score 0 · Answer 1 · answered Nov 01 '13 at 09:39

0

put your code in

$(document).ready(function() {
    $(".select").click(function (e) {
        e.preventDefault();
        $(this).nextUntil("a").select();
    });
});

answered Nov 01 '13 at 09:39

Rasool Ghafari

4,128
7
44
71

Forget it, please vote up it and/or mark it as answer if helped you. – Rasool Ghafari Nov 01 '13 at 10:27

score 0 · Answer 2 · answered Nov 01 '13 at 09:39

You are registering the click handler which is calling the select method on a click handler so when the first click happens there is no handler to select the elements, but it merely registers a handler which will do the selection. When the second click happens you will have 2 handlers for the click event one selText and second the handler registered by the first one. But when you do the third click the select() code will get called twice.

So in your case the solution is to remove the inlined handler and register a click handler on a dom ready callback as shown below.

<a href="#" class="select">click</a>
<input type="text"  value="value" />

<a href="#" class="select">click</a>
<input type='text'  value='value' />

<a href="#" class="select">click</a>
<input type="text"  value="value" />

then

jQuery(function () {
    $(".select").click(function (e) {
        $(this).nextUntil("a").select();, e.preventDefault()
    });
})

score 0 · Accepted Answer · answered Nov 01 '13 at 09:48

This is because when you add

function selText() {
    $(".select").click(function () { $(this).nextUntil("a").select(); });
}

and then click on the anchor link, what happens, the first time, is the function binds a click event to the ".select" element. This is the reason why the first click doesn't do anything. But the clicks after that will work as expected. The unwanted effect of the above code is, that you are binding the click event the multiple functions which actually do the same thing (no. of functions bound being equal to the no. of times you click the anchor tag)

The answer is, that you need to place

$(".select").click(function () { $(this).nextUntil("a").select(); });

under

$(document).ready(function(){
..// your code here
});

my pleasure. You can upvote the answer or mark it as answered, if your question is answered, :-) — aash, Nov 01 '13 at 09:58

score 0 · Answer 4 · answered Nov 04 '13 at 13:23

I don't Know why but in some views in my project the above code don't work and I have to do the following

$(document).ready(function () {
    $(document).on('click', '.tabl-red', function (e) {
        e.preventDefault();
        $(this).nextUntil("a").select();
    });
});

maybe it helps someone

jquery function first run after two click

4 Answers4