Question

我正在尝试使用下面的代码切换TEXT BOX，但似乎无法正常工作。我可以添加TEXT BOX，但不会删除。

HTML：

$(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");
    });
});

JS：

    ...
    private String tstr1;
    ...
    private void initialize() {
        ...
        btnNewButton.addActionListener( new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                ...
                tstr1 = driver.findElement(By.xpath("//*[@id='content']")).getText();
                ...
            }
        });
    }

Answer 1

尝试此切换：

        $(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>

Answer 2

请试试这个：

$( 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为动态创建的元素附加事件。

Answer 3

您需要使用：

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

Answer 4

尝试使用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>

Jquery切换文本框

4 个答案: