在下一个文本框添加图标答案

【问题标题】：Adding icon next textbox在下一个文本框添加图标
【发布时间】：2013-10-24 13:40:38
【问题描述】：

单击下一个按钮时，如果文本框为空，则控制文本框我想在文本框附近添加删除图标。我试过了，但没有用。

 $(".nextBtn").click(function () { 
      $(".txt").each(function () {
         $currentVal = $(this).val();
         if ($currentVal.length == 0 || $currentVal == $(this).attr('placeholder')) {
             //$(this).css({"backgroundColor": "black", "color": "white"});
             $('<a data-role="button"data-icon="delete"></a>').insertAfter($(this));
         }                
       });
 });

//jquery手机

   <div data-role="content">
            <div data-role="fieldcontainer">
                <label for:"name">Name:</label>
                <input type="text" class="txt" id="name" required placeholder="Enter your name">        

            </div>

            <div data-role:"fieldcontainer">
                <label for:"surname">Surname:</label>
                <input type="text" class="txt" id="surname" required placeholder="Enter              your surname">
            </div>  

            <div data-role:"fieldcontainer">
                <label for:"email">E-mail:</label>
                <input type="email" class="email" id="email" required placeholder="Enter your e-mail">
            </div>    
        </div>

【问题讨论】：

标签： javascript jquery jquery-mobile textbox icons

【解决方案1】：

.insertAfter(this) = .insertAfter($(this)) 你错过了这部分。

【讨论】：

【解决方案2】：

你不会关闭每个条件

$('item').each(function() {
   ...
});

并使用 .insertAfter( $(this) ) ，而不是 .insertAfter( this );

【讨论】：

不，我关闭了。我尝试了每个功能。我只是没有在这里写我所有的代码。

【解决方案3】：

http://jsfiddle.net/Xb7Mc/

验证您的 HTML

<div data-role="content">
    <div data-role="fieldcontainer">
        <label for="name">Name:</label>
        <input type="text" class="txt" id="name" placeholder="Enter your name" required />
    </div>
    <div data-role="fieldcontainer">
        <label for="surname">Surname:</label>
        <input type="text" class="txt" id="surname" placeholder="Enter your surname" required/>
    </div>
    <div data-role="fieldcontainer">
        <label for="email">E-mail:</label>
        <input type="email" class="email" id="email" placeholder="Enter your e-mail" required/>
    </div>
    <span class="nextBtn">NEXT</span>
</div>

对于你的 javascript：

$(".nextBtn").click(function () { 
      $(".txt").each(function () {
         $currentVal = $(this).val();
         // the placeholder will never be the value of an input element
         if ($currentVal.length == 0) {
             //$(this).css({"backgroundColor": "black", "color": "white"});
             $(this).parent().append('<a data-role="button" data-icon="delete">X</a>');
         }
      }); // close the $(".txt").each(function() {              
});

【讨论】：