Qabul qilmasdan tugmani bosishdan so'ng sahifa yuklanishini qanday cheklash mumkin?

Men HTML formatidagi tugmachani forma elementlarini qo'shishga harakat qilaman:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

function createRow(){
    var row = document.createElement('div');
    var input=document.createElement('input');
    input.setAttribute("type", "Textbox");
    var time=document.createElement('input');
    time.setAttribute("type", "Textbox");
    row.appendChild(input);
    row.appendChild(time);
    return row;
}
function addRow(){
    console.log("z");
    var routes = document.getElementById("routes");
    routes.appendChild(createRow());
    return false;
}
<form id="routes">
    <button onclick="addRow()">+</button>
</form>
</div> </div>

Lekin har bir tugmani bosib, sahifa qayta yuklaydi, url qo'shilgan savol belgisi. Men bir juft g'oyani topdim:

  1. preventDefault (e)
  2. FALSE qaytarilsin

ammo hech kim ishlamadi.

Iltimos, nimani tuzatishim kerakligini ayting. Bundan tashqari, ba'zi shartlar mavjud:

  1. Ushbu tugma tugmachasi emas, keyinroq qo'shiladi
  2. Ilovani iloji boricha soddalashtirishi kerak, interfeys loyihaning asosiy yo'nalishi emas.
0

11 javoblar

OK, voqea tinglovchilarida preventDefault'dan foydalanish misoli mavjud.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 function createRow(){
    var row = document.createElement('div');
    var input=document.createElement('input');
    var time=document.createElement('input');
    input.setAttribute("type", "Textbox");
    time.setAttribute("type", "Textbox");
    row.appendChild(input);
    row.appendChild(time);
    return row;
}

function addRow(){
    document.getElementById("routes").appendChild(createRow());
}

document.querySelector("button").addEventListener("click", function(event)
{
  event.preventDefault();
  addRow();
});
<form id="routes">
    <button>+</button>
</form>
</div> </div>
0
qo'shib qo'ydi

OK, voqea tinglovchilarida preventDefault'dan foydalanish misoli mavjud.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 function createRow(){
    var row = document.createElement('div');
    var input=document.createElement('input');
    var time=document.createElement('input');
    input.setAttribute("type", "Textbox");
    time.setAttribute("type", "Textbox");
    row.appendChild(input);
    row.appendChild(time);
    return row;
}

function addRow(){
    document.getElementById("routes").appendChild(createRow());
}

document.querySelector("button").addEventListener("click", function(event)
{
  event.preventDefault();
  addRow();
});
<form id="routes">
    <button>+</button>
</form>
</div> </div>
0
qo'shib qo'ydi

tugmasi ning odatiy xatti-yuborishi kerak. type = tugmasi ni belgilang va bu ko'rsatuv xatti-harakatni bekor qiladi.

<button type = "tugma" onclick = "addRow ()"> +

0
qo'shib qo'ydi

tugmasi ning odatiy xatti-yuborishi kerak. type = tugmasi ni belgilang va bu ko'rsatuv xatti-harakatni bekor qiladi.

<button type = "tugma" onclick = "addRow ()"> +

0
qo'shib qo'ydi

tugmasi ning odatiy xatti-yuborishi kerak. type = tugmasi ni belgilang va bu ko'rsatuv xatti-harakatni bekor qiladi.

<button type = "tugma" onclick = "addRow ()"> +

0
qo'shib qo'ydi

id tugmachasini bosing va preventDefault ni $ (document) .ready (..) funktsiyasida kiriting

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    $(document).ready(function(){
        
                $( "#routes_button" ).click(function( event ) {
                        event.preventDefault();  
                });
        });
        
        function createRow(){
        var row = document.createElement('div');
        var input=document.createElement('input');
        input.setAttribute("type", "Textbox");
        var time=document.createElement('input');
        time.setAttribute("type", "Textbox");
        row.appendChild(input);
        row.appendChild(time);
        return row;
    }
    function addRow(){
        console.log("z");
        var routes = document.getElementById("routes");
        routes.appendChild(createRow());
        return false;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>


<form id="routes">
        <button id="routes_button" onclick="addRow()">+</button>
    </form>
</div> </div>
0
qo'shib qo'ydi

id tugmachasini bosing va preventDefault ni $ (document) .ready (..) funktsiyasida kiriting

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    $(document).ready(function(){
        
                $( "#routes_button" ).click(function( event ) {
                        event.preventDefault();  
                });
        });
        
        function createRow(){
        var row = document.createElement('div');
        var input=document.createElement('input');
        input.setAttribute("type", "Textbox");
        var time=document.createElement('input');
        time.setAttribute("type", "Textbox");
        row.appendChild(input);
        row.appendChild(time);
        return row;
    }
    function addRow(){
        console.log("z");
        var routes = document.getElementById("routes");
        routes.appendChild(createRow());
        return false;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>


<form id="routes">
        <button id="routes_button" onclick="addRow()">+</button>
    </form>
</div> </div>
0
qo'shib qo'ydi

onclick funktsiyasi FALSE -ni qaytarishi kerak. Bundan tashqari, addRow() FALSE qaytarish bo'lishi kerak:

<form id="routes">
   <button onclick="return addRow()">+</button>
</form>
0
qo'shib qo'ydi

onclick funktsiyasi FALSE -ni qaytarishi kerak. Bundan tashqari, addRow() FALSE qaytarish bo'lishi kerak:

<form id="routes">
   <button onclick="return addRow()">+</button>
</form>
0
qo'shib qo'ydi

onclick funktsiyasi FALSE -ni qaytarishi kerak. Bundan tashqari, addRow() FALSE qaytarish bo'lishi kerak:

<form id="routes">
   <button onclick="return addRow()">+</button>
</form>
0
qo'shib qo'ydi

Ariza ichidagi HTML5 tugma elementi ko'rsatuv ko'rsatuvga ega. Agar siz unga "tugma" turini beradigan bo'lsak, hamma narsa yaxshi ishlaydi

<!DOCTYPE HTML>
<html>
 <head>
 </head>
 <body>
 <form id="routes">
     <div><button type="button" onclick="addRow()">+</button></div>
 </form>
 <script type="text/javascript">
     function createRow(){
         var row = document.createElement('div');
         var input=document.createElement('input');
         input.setAttribute("type", "Textbox");
         var time=document.createElement('input');
         time.setAttribute("type", "Textbox");
         row.appendChild(input);
         row.appendChild(time);
         console.log(row);
         return row;
     }
     function addRow(){
         console.log("z");
         var routes = document.getElementById("routes");
         routes.appendChild(createRow());
         return false;
     }
 </script>
 </body>
 </html>
0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb