javascript - jquery 点击功能不适用于每个输入字段

Question

在我的页面上，当我按下按钮 “Schritt hinzufügen” 时，我可以创建一个包含 2 个字段(1x 输入类型文本，1x textarea)的新 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()。