Question

我在网上看到了各种各样的答案，但似乎没有一个对我有用。

这是我们的本地内联网。我在用户单击按钮时动态地向表单添加输入。我有焦点/模糊事件，但他们没有抓住动态创建的文本框上的焦点和模糊。我正在使用.on进行模糊/聚焦，但它仍然无法正常工作。我尝试将“input [type = text]”添加到.on函数作为选择器，但这也不起作用。我也尝试给输入一个类并使用它而不是输入[type = text]但它仍然无法工作。

我正在使用blur / focus来输入默认值，以便用户知道文本框的用途。我知道html5占位符，但这对我们的一些计算机仍然有的IE9不起作用。

jsfiddle example

HTML

  <div id="details" class="miSections relative">
        <div class="sectionHeader relative">Details<button id="detailButton" class="newButton" type="button">Add Another Detail</button></div>
            <table id="detailsTable" class="infoTable">                   
               <tr>
                    <td><input type="text" name="detDate_1" id="detDate_1" class="textarea defaultText" autocomplete="off" title="Detail Date"/></td>
                </tr>                    
            </table>
    </div>

CSS

  .infoTable{
    text-align: center;
    width:100%;
  }
  .defaultText{
    color: #a1a1a1;
    font-style: italic;
  }

的javascript

  $(document).ready(function () { 
        $('.textarea').on('focus', function () {
            //using .on('focus','.textarea',function() doesn't work
            if ($(this).val() == $(this).attr('title')) {
                $(this).removeClass('defaultText');
                $(this).val("");
            }
        });

        $('.textarea').on('blur',  function () {
            if ($(this).val() == "" || $(this).val() == $(this).attr('title')) {
                $(this).addClass('defaultText');
                $(this).val($(this)[0].title);
            } else { $(this).removeClass('defaultText'); }
        });

        //fire the blur events to populate the inputs with default values
        blurIt();

        $('#detailButton').on('click', function () {
            $('#detailsTable tr:last-child').after('><tr><td><input type="text" name="detDate_2" id="detDate_2" class="textarea defaultText" autocomplete="off" title="Detail Date"/></td></tr>');

            blurIt();
            countIt();
        });
    });
  function blurIt(){
    $('.textarea').blur();
  }
  function countIt(){
    var inputs = $('.textarea').length;
    console.log(inputs);
  }

Answer 1

使用.on()的事件委托语法。

变化：

$('.textarea').on('focus', function () {
//and
$('.textarea').on('blur',  function () {

为：

$(document).on('focus', '.textarea', function () {
//and
$(document).on('blur',  '.textarea',function () {

<强> jsFiddle example

请注意，在我的示例中，使用$('#details')代替$(document)可能会提高效率。

jquery on blur不适用于动态文本框

1 个答案: