jquery on click event input

Question

Imagine this: i have multiple divs with attr "data-question-id" and inside this divs i have one or more inputs that may or may not have a attr "has-next-question". See the example below:

<div data-question-id="5">
<input type="radio" has-next-question="true" value="2"> test1
<input type="radio" value="3"> test2
</div>

<div data-question-id="6">
<input type="radio" has-next-question="true" value="5"> test3
<input type="radio" has-next-question="true" value="7"> test4
</div>

As you can see in the first div i have two inputs, but one doesnt have the attr "has-next-question". My question is, how can i bind a click event on the input that have a parent div with attr "data-question-id" and this div have at least an input with attr "has-next-question".

I already accomplish this:

$(document).on('click', 'div[data-question-id] input', function(e) {
          alert('click');
});

any help? thanks guys

Edit: Changed attr "has-next-question" because its a invalid html attribute.

Imagine this: if i click in "test1" it should trigger the event, but if i click in "test2" it should too, because the parent div with attr "data-question-id" have at least one input with attr "has-next-question", corresponding to the "test1". If there is none input with attr "has-next-question" in the parent div, the event shouldnt trigger.

$(document).on('click', 'div[data-question-id] input[has-next-question="true"]', function(e) { ? — gen_Eric
– gen_Eric, Commented Mar 28, 2013 at 18:02
I know it is not exactly what you are asking, but since the "has-next=question='true'" is not an html attribute, why don't you make this a class name then trigger on that? It looks like you only use it when there is a next question anyways, there are no 'false' values. $(document).on('click', 'div[data-question-id] input .has-next-question, function(e) { alert('click'); }); — radi8
– radi8, Commented Mar 28, 2013 at 18:06

Ricardo Lohmann · Accepted Answer · 2013-03-28 18:02:20Z

3

You did it for the div, so repeat it.

div[data-question-id] input[has-next-question]

Demo

answered Mar 28, 2013 at 18:02

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

João Alves Over a year ago

maybe and didnt make myself clear, imagine this: if i click in "test1" it should trigger the event, but if i trigger in "test2" it should too, because the parent div with attr "data-question-id" have at least one input with attr "has-next-question", corresponding to the "test1". The trigger of the event must on trigger only when there is none input with attr "has-next-question"

Jashwant · Accepted Answer · 2013-03-28 18:34:47Z

1

Its not correct html. has-next-question is not a valid attribute.

But this should work,

$(document).on('click', 'div[data-question-id] input[has-next-question]', function(e) {
          alert('click');
});

Edit: (after change in original question),

No, you cannot make a selector out of that. jQuery uses CSS selector and they do not work from child to parent.

However, you can do something like this,

$(document).on('click', 'div[data-question-id] input', function(e) {
       if($(this).parent().find('[has-next-question]').length === 0 ) return;

       // Other code which needs to be executed.
});

i.e. if parent does not have child with [has-next-question] attribute, then comes out from the function.

edited Mar 28, 2013 at 18:34

answered Mar 28, 2013 at 18:03

Jashwant

29.2k16 gold badges76 silver badges110 bronze badges

2 Comments

João Alves Over a year ago

thanks for the tip about my invalid attribute. see my answer at Ricardo Lohmann comment.

João Alves Over a year ago

that solution resolve my problem, thanks. I will accept your answer

Artyom Neustroev · Accepted Answer · 2013-03-28 18:02:39Z

1

Just extend your selector:

$(document).on('click', "div[data-question-id] input[has-next-question='true']", function(e) {
          alert('click');
});

answered Mar 28, 2013 at 18:02

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

Collectives™ on Stack Overflow

jquery on click event input

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related