jQuery add input fields and handle select change event

Question

I want to clone a row with 1 input or select and 1 select field. Depends on the value of the first select it should change the second to an input or a select fields. It works for the parent but not for the clones.

    jQuery("body").delegate("p", "click", function(){
        var $tr    = jQuery(this).closest('.tr_clone');
        var $clone = $tr.clone();
        $tr.after($clone);
    });
    jQuery('.art_der_fahrt').hide();
    jQuery('.wert_input').show();
    jQuery(".fahrtenbuch_aenderungen").change(function() {
                if(jQuery(this).val() == '52') {
                    jQuery(this).parent('td').next('td').children(".art_der_fahrt").show();
                    jQuery(this).parent('td').next('td').children('.wert_input').hide();
                }
                else {
                    jQuery(this).parent('td').next('td').children(".art_der_fahrt").hide();
                    jQuery(this).parent('td').next('td').children('.wert_input').show();
                }

            });

<td>
    <select class="fahrtenbuch_aenderungen" name="fahrtenbuch_aenderungen">
      <option></option>
      <option value="24">Fahrtziel</option>
      <option value="23">Besuchte Personen / Firmen / Objekte</option>
      <option value="3">Fahrer</option>
      <option value="52">Art der Fahrt</option>
      <option value="14">Fahrzeugstandort</option>
      <option value="111">Fahrtzweck</option>
    </select>
</td>
<td>
    <input value="" class="wert_input" name="wert" type="text">
    <span class="art_der_fahrt">
        <select tabindex="111" class="test" name="select">
            <option></option>
            <option value="Dienstfahrt">Dienstfahrt</option>
            <option selected="selected" value="Wohnung">Wohnung</option>
            <option value="Bereitschaft">Bereitschaft</option>
            <option value="3">Fahrer</option>
            <option value="52">Privatfahrt</option>
            <option value="Familienheimfahrt">Familienheimfahrt</option>
        </select>
    </span>

</td>
<td colspan="2">
<p>Click me!</p>
</td>

Dipesh Parmar · Accepted Answer · 2013-02-28 10:00:30Z

2

use .on

jQuery(document).on("click", "p", function(){

also

jQuery(".fahrtenbuch_aenderungen").on('change',(function() {

because .on already replaces .live and .bind and .delegate. and .on is also faster than other..http://jsperf.com/bind-vs-live-vs-delegate-vs-on/5

edited Feb 28, 2013 at 10:00

answered Feb 28, 2013 at 9:39

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

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

2 Comments

David Hedlund Over a year ago

This should be a comment as it does not address the issue. delegate may be slower but it works, so changing to on won't solve anything here.

monotasker Over a year ago

This should really now be the accepted answer. Delegate() is still a valid way of doing things, but its a low-level interface. The on() method is intended to be the "normal" high-level interface.

David Hedlund · Accepted Answer · 2013-02-28 09:50:38Z

1

You're binding the change listener –

jQuery(".fahrtenbuch_aenderungen").change(function() {

– at a time when there is only one select element. Only that element will have the listener. You need to use delegates here as well:

jQuery("body").delegate(".fahrtenbuch_aenderungen", "change", function() {

Using .delegate here, in the sense that you've used it in your own post, assuming an older version of jQuery. As others have pointed out, you should prefer .on if it's available.

Demo

answered Feb 28, 2013 at 9:50

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Comments

K D · Accepted Answer · 2013-02-28 09:42:19Z

-1

Use following

$("td > p").on("click", function(){
    // your code here
});

"on" can bind events to dynamically generated dom

answered Feb 28, 2013 at 9:42

K D

6,0091 gold badge25 silver badges36 bronze badges

1 Comment

David Hedlund Over a year ago

Yes it can, but not using the code you've posted. The event listener will only be bound to existing p tags in your code. See Parmar's answer for an example on how to use delegated events with on.

Collectives™ on Stack Overflow

jQuery add input fields and handle select change event

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related