Question

我的想法是询问用户他想要创建多少表单，然后选择他想要编辑的表单，然后询问他想要创建多少元素以及它们的类型。这就是我到目前为止所做的：

 <h2>Questions</h2><br>

                            <p>How many questions do you want to be created?</p>

                            <form id="stepsform">
                            <input type="number" name="steps" id="steps" style="color:black">
                                <ul class="actions">
                                    <li><button class="button scrolly" name="numberform" id="numberform">Submit</button></li>
                                </ul>
                            </form>


    <script>
        $( "#stepsform" ).submit(function( event ) {
        event.preventDefault();

        var $form = $( this ),
        term = $form.find( "input[name='steps']" ).val(),
        url = $form.attr( "action" );
        var posting = $.post( url, { numberform: term } );

        posting.done(function( data ) {
        var content = $( data ).find( "#content" ); 

        $( "#content" ).empty().append( content );
        var uri = "#two";    
        $(location).attr('href',uri);
        });
    });
    </script>

这就是我停留的脚本，在通过ajax创建图像后，我希望它们可以点击，以便用户可以提交图像后面的值：

<h2>Forms</h2>

                             <p>choose the form you want to edit</p>
                             <div id="content">
                             <form id="elementsform">
                             <?php 
                            if(isset($_POST['numberform'])){
                                $i = 0;
                                $formchoice = array_fill($i, $_POST['numberform'], 'Formular' );

                                foreach($formchoice as $key){
                                    echo ' <input type="image" src="formular.png" alt="'.$formchoice[$i].$i.'" data-formularid="'.$formchoice[$i].$i.'" height="100px" width="100px" name="'.$formchoice[$i].$i.'">  '."\t";
                                    $i++;
                                }
                            }
                             ?>
                             </form>
                             <script>
        $( "#elementsform input[type='image']" ).click(function( event ) {
            event.preventDefault();
            var formular_id = $(this).data("formularid");
            term = $form.find( "input[type='image']" ).val(),
            url = $form.attr( "action" );
            var posting = $.post( url, { elementsform: term } );

            posting.done(function( data ) {
            var content = $( data ).find( "#content1" ); 

            $( "#content1" ).empty().append( content );
            var uri = "#three";    
            $(location).attr('href',uri);
        });
});
</script>

当我点击图片时，没有任何反应，但实际上它应该提交data-formularid =“”中的值，然后转到另一个问题，有人知道怎么做吗？

Answer 1

委派您的点击事件

  $( "body" ).on('click','#elementsform input[type="image"]',function( event ) {                
                    $form = $(this).closest('form');
                    event.preventDefault();
                    var formular_id = $(this).data("formularid");
                    term = $form.find(this).val(),
                    url = $form.attr( "action" );
                    var posting = $.post( url, { elementsform: term, formularid:formular_id } );

                    posting.done(function( data ) {
                    var content = $( data ).find( "#content1" ); 

                    $( "#content1" ).empty().append( content );
                    var uri = "#three";    
                    $(location).attr('href',uri);
                });

在jquery中使用ajax提交图像的值

1 个答案: