Question

在我的页面上，当我按下按钮“Schritthinzufü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>

这是一个exapmple 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>

如果我再次按下按钮“Schritthinzufügen”，我将获得相同的容器，只有字段的名称，将获得另一个号码。

以下是删除输入字段类的jquery代码：

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

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

如果你不理解我，你可以自己测试一下。以下是页面链接：MyPage

首先按下“Schritthinzufü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（）。

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

1 个答案: