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

Question

在我的页面上，当我按下按钮 “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");
    });
    
});

Answer 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()。