jquery click函数不适用于每个输入字段

Posted 2023-05-08

【中文标题】jquery click函数不适用于每个输入字段

【英文标题】：jquery click function dont work on every input field

【发布时间】：2015-07-20 06:23:40

【问题描述】：

在我的页面上，当我按下按钮 “Schritt hinzufügen” 时，我可以创建一个具有 2 个字段（1x 输入类型文本，1x 文本区域）的新 div 容器。 如果我按下按钮“Schritt entfernen”，它将删除最后一个容器。我使用 jquery 进行此操作。如果我按下按钮“Erstellen”，jquery 将检查是否所有字段都已填写（没有输入字段类型文件）。如果某些字段未填写，它们将获得红色边框。

但现在我希望，当我聚焦输入字段时，红色边缘会消失。它不是 100% 有效的。在此代码上它可以工作（不是用 jquery 创建的）：

            <div class="step">
                <div class="header_step">Allgemeines zum Tutorial</div>
                <div class="body_step">
                    <a class="create_tutorial_a">Titel des Tutorial's</a><input class="create_tutorial_input" type="text" name="input_tutorialtitle_name"/>
                    <br>
                    <a class="create_tutorial_a">Autor des Tutorial's</a><input class="create_tutorial_input" type="text" name="input_tutorialauthor_name"/>
                    <br><br>
                    <a class="create_tutorial_a_full_width">Beschreibung des Tutorial's</a>
                    <br>
                    <textarea class="create_tutorial_textarea" name="input_tutorialdescription_name"></textarea>
                </div>
</div>

这是一个示例 div 容器（使用 jquery 创建）：

<div class="step">
  <div class="header_step">Schritt 1 des Tutorial's</div>
  <div class="body_step">
    <a class="create_tutorial_a">Titel des Schrittes</a>
    <input name="input_title_name1" class="create_tutorial_input" type="text">
    <br>
    <a class="create_tutorial_a">Bild</a>
    <input type="file">
    <br><br>
    <a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a>
    <br>
    <textarea class="create_tutorial_textarea" name="input_description_name1">
    </textarea>
  </div>
</div>

如果我再次按下按钮“Schritt hinzufügen”，我将得到相同的容器，只有字段的名称会得到另一个数字。

这里是删除输入字段类的jquery代码：

$('input[type="text"]').click(function()
    $(this).removeClass("empty_field");
);

$('textarea').click(function()
    $(this).removeClass("empty_field");
);

如果你不明白我的意思，你可以自己测试一下。这是页面链接：MyPage

首先按下按钮 “Schritt hinzufügen” 两次，然后按下按钮 “Erstellen”。在此之后，每个输入字段（未填充）都会有一个红色边框。如果您聚焦页面的第一个输入字段（“Titel des Tutorial's”）然后“取消聚焦”它，您将看到边框将消失。但是在使用jquery创建的步骤中它不会工作（聚焦它们然后不聚焦（边界不会消失））。也许你们中的某个人有一个想法^^

编辑---我的完整js代码：

$(document).ready(function() 
    var max_fields      = 11; //maximum input boxes allowed
    var wrapper         = $(".all_steps"); //Fields wrapper
    var add_button      = $("#add_step"); //Add button ID
    var remove_step     = $("#remove_step");
    
    var x = 1; //initlal text box count
    $(add_button).click(function() //on add input button click
        if(x < max_fields) //max input box allowed
            $(wrapper).append('<div class="step"><div class="header_step">Schritt '+ x +' des Tutorial\'s</div><div class="body_step"><a class="create_tutorial_a">Titel des Schrittes</a><input name="input_title_name'+x+'" class="create_tutorial_input" type="text" /><br><a class="create_tutorial_a">Bild</a><input type="file" /><br><br><a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a><br><textarea class="create_tutorial_textarea" name="input_description_name'+x+'"></textarea></div>');
            x++; //text box increment
        
    );
   
        
    $(remove_step).click(function() //user click on remove text
        if(x > 1)
            $('.all_steps .step:last').remove();
            x--;
        
    );
        
    $('form.send').on('submit', function()

        var empty = false;
        
        $('input[type="text"]').each(function()
            if ($.trim($(this).val()) == '') 
                $(this).addClass("empty_field");
                empty = true;
            
            else
                $(this).removeClass("empty_field");
            
        );

        $('textarea').each(function()
            if ($.trim($(this).val()) == '') 
                $(this).addClass("empty_field");
                empty = true;
            
            else
                $(this).removeClass("empty_field");
            
        );


        if(empty == false)
            var that = $(this),
                url = that.attr('action'),
                type = that.attr('method'),
                data = ;
            
            that.find('[name]').each(function(index, value)
                var that = $(this),
                    name = that.attr('name'),
                    value = that.val();
                
                data[name] = value;
            );
            
            $.ajax(
                url: url,
                type: type,
                data: data,
                success: function(response)
                    window.location.replace("index.php?content=create_tutorial_successful");
                
            );
        
        else
            console.log("Alles ausfüllen");
        

        return false;
    );

    
    $('input[type="text"]').click(function()
        $(this).removeClass("empty_field");
    );

    $('textarea').click(function()
        $(this).removeClass("empty_field");
    );
    
);

【问题讨论】：

友情提示，因为您已经将 add_button 和 remove_step 定义为 jQuery 元素，所以在附加点击处理程序时，您不需要另外将它们包装在 bling 中。我不确定是否有任何性能影响（或者 jQuery 是否足够聪明，不会创建 another jQuery 对象）。无论如何，以下就足够了:) var add_button = $('#add_step'); add_button.click(function() ... );

哦，谢谢你的提示！没看到你的评论抱歉！ :)

【参考方案1】：

我需要查看您创建新元素的功能才能完全确定，但据我所知，我认为您需要在创建新元素时重新应用点击侦听器。它们不是“追溯”的，这意味着您添加的“点击”将针对您设置它们时 dom 中的内容，而不是您之后创建的新元素。

我尝试通过控制台在您的页面上使用您拥有的确切代码设置点击事件，并且它有效。 因此，在创建新元素时，您可能可以使用以下内容：

$(your_new_element).click(function()
    $(this).removeClass("empty_field");
);

在您创建的每个想要此行为的元素上。

编辑：

类似这样的：

 $(add_button).click(function() //on add input button click
        if(x < max_fields) //max input box allowed
            $(wrapper).append('<div class="step"><div class="header_step">Schritt '+ x +' des Tutorial\'s</div><div class="body_step"><a class="create_tutorial_a">Titel des Schrittes</a><input name="input_title_name'+x+'" class="create_tutorial_input" type="text" /><br><a class="create_tutorial_a">Bild</a><input type="file" /><br><br><a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a><br><textarea class="create_tutorial_textarea" name="input_description_name'+x+'"></textarea></div>');
            x++; //text box increment
        
    add_click_events();
    );

function add_click_events()
 $('input[type="text"]').last().click(function()
        $(this).removeClass("empty_field");
    );

    $('textarea').last().click(function()
        $(this).removeClass("empty_field");
    );

并在首次启动时添加 add_click_events()。

【讨论】：

@Julien 与其在每次创建新元素时都重新定义点击处理程序，不如直接使用.on 来代替？

@Sean3z 我认为你是对的，这样会更清洁、更高效。

@JulienGrégoire 感谢您的回答！你帮了我很多！ :)