jQuery添加输入字段并处理选择更改事件

时间:2013-02-28 09:38:12

标签: javascript jquery

我想用1个输入或select和1选择字段克隆一行。 取决于第一个选择的值,它应该将第二个更改为输入或选择字段。它适用于父级,但不适用于克隆。

    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>

3 个答案:

答案 0 :(得分:2)

使用.on

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

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

因为.on已经取代.live.bind以及.delegate。 和.on也比其他.. http://jsperf.com/bind-vs-live-vs-delegate-vs-on/5

更快

答案 1 :(得分:1)

您正在绑定更改侦听器 -

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

- 在只有一个select元素的时候。只有那个元素才有听众。你也需要在这里使用代表:

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

在这里使用.delegate,假设您在自己的帖子中使用它,假设使用旧版本的jQuery。正如其他人所指出的那样,如果可以的话,你应该更喜欢.on

Demo

答案 2 :(得分:-1)

使用以下

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

“on”可以将事件绑定到动态生成的dom