JQuery to toggle текстовое поле

Я пытаюсь переключить ТЕКСТ BOX, используя код ниже, но, похоже, он не работает. Я могу добавить TEXT BOX, но удаление не происходит.JQuery to toggle текстовое поле

HTML:

<body id="bd"> 
    <div id="did"></div> 
    <button id="btn" >Tryit</button> 
</body>

JS:

$(document).ready(function(){ 
    $("#btn").click(function(){ 
     $("#bd").append('<input type="Text" name="fname" id="fname" />'); 
     $("#fname").focus(); 
     $("#btn").attr("id","button"); 
    }); 
    $("#button").on("click",function(){ 
     $("#fname").remove(); 
     $("#button").attr("id","btn"); 
    }); 
});

источник

2015-09-07 Verma

Если вы добавляете элементы динамически Пытаться с помощью функции делегата() –

Попробуйте этот переключатель:

 $(document).ready(function(){ 
      $("#btn").on('click',function(){ 

       if($("#fname").length > 0){ 
        $("#fname").remove(); 
       }else{ 

        $("#bd").append('<input type="Text" name="fname" id="fname" />'); 
        $("#fname").focus(); 
        $("#btn").attr("id","button"); 

       } 

      }); 

     }); 
    </script> 
</head> 
<body id="bd"> 
<div id="did"></div> 
<button id="btn" >Tryit</button> 
</body> 
</html>

источник

2015-09-07 14:41:26 guvenckardas

Спасибо. Я работаю. Но я не могу отметить это как ans as Я новичок на этом сайте. – Verma

вы можете прочитать здесь. http://meta.stackexchange.com/a/147532 Спасибо – guvenckardas

Является ли это сообщение, которое я вам пришлю? Спасибо – guvenckardas

Пожалуйста, попробуйте это:

$(document).delegate("#btn", "click", function() { 
    $("#bd").append('<input type="Text" name="fname" id="fname" />'); 
    $("#fname").focus(); 
    $("#btn").attr("id","button"); 
}); 
$(document).delegate("#button", "click", function() { 
    $("#fname").remove(); 
    $("#button").attr("id","btn"); 
});

DEMO

Вы можете использовать delegate прикрепить событие для динамически создаваемых элементов.

источник

2015-09-07 14:41:36

Вы должны использовать:

$("#btn").on('click',function(){ 
    if($("#fname").length) 
    $("#fname").remove(); 
    else{ 
    $("#bd").append('<input type="Text" name="fname" id="fname" />'); 
    $("#fname").focus(); 
}});

источник

2015-09-07 14:48:55

Попробуйте делегирование click события document, используя .replaceWith()

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 

 
     var fn = function fn() { 
 
     $("#bd").append('<input type="Text" name="fname" id="fname" />'); 
 
     $("#fname").focus(); 
 
     $(this).replaceWith($("<button id=button>Try it</button>")); 
 
     }; 
 

 
     $(document).on("click", "#btn", fn); 
 

 
     $(document).on("click", "#button", function() { 
 
     $("#fname").remove(); 
 
     $(this).replaceWith($("<button id=btn>Try it</button>")).click(fn); 
 
     }); 
 

 
    }); 
 
    </script> 
 
</head> 
 

 
<body id="bd"> 
 
    <div id="did"></div> 
 
    <button id="btn">Tryit</button> 
 
</body> 
 

 
</html>

источник

2015-09-07 15:09:37 guest271314

JQuery to toggle текстовое поле

ответ

Смежные вопросы