Nilai "href" manakah yang harus saya gunakan untuk tautan JavaScript, "#" atau "javascript: void (0)"?

Berikut ini adalah dua metode membangun tautan yang memiliki tujuan tunggal menjalankan kode JavaScript. Mana yang lebih baik, dalam hal fungsionalitas, kecepatan memuat halaman, keperluan validasi, dll.?

function myJsFunc() {
    alert("myJsFunc");
}

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

atau

function myJsFunc() {
    alert("myJsFunc");
}

 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Saya menggunakan javascript:void(0).

Tiga alasan. Mendorong penggunaan di #antara tim pengembang mau tidak mau mengarah ke beberapa menggunakan nilai kembali fungsi yang disebut seperti ini:

function doSomething() {
    //Some code
    return false;
}

Tetapi kemudian mereka lupa untuk menggunakan return doSomething()onclick dan hanya menggunakan doSomething().

Alasan kedua untuk menghindari #adalah bahwa final return false;tidak akan mengeksekusi jika fungsi yang dipanggil melempar kesalahan. Oleh karena itu pengembang juga harus ingat untuk menangani kesalahan dengan tepat pada fungsi yang dipanggil.

Alasan ketiga adalah bahwa ada kasus di mana onclickproperti acara ditetapkan secara dinamis. Saya lebih suka untuk dapat memanggil fungsi atau menugaskannya secara dinamis tanpa harus kode fungsi khusus untuk satu metode lampiran atau yang lain. Karenanya saya onclick(atau apa pun) di markup HTML terlihat seperti ini:

onclick="someFunc.call(this)"

ATAU

onclick="someFunc.apply(this, arguments)"

Menggunakan javascript:void(0)menghindari semua sakit kepala di atas, dan saya belum menemukan contoh kelemahan.

Jadi jika Anda seorang pengembang tunggal maka Anda dapat dengan jelas membuat pilihan sendiri, tetapi jika Anda bekerja sebagai tim, Anda harus menyatakan:

Gunakan href="#", pastikan onclickselalu mengandung return false;di akhir, bahwa setiap fungsi yang dipanggil tidak menimbulkan kesalahan dan jika Anda melampirkan fungsi secara dinamis ke onclickproperti pastikan bahwa dan tidak membuang kesalahan itu kembali false.

ATAU

Menggunakan href="javascript:void(0)"

Yang kedua jelas jauh lebih mudah untuk berkomunikasi.

Tidak juga.

Jika Anda dapat memiliki URL aktual yang masuk akal gunakan itu sebagai HREF. Onclick tidak akan aktif jika seseorang mengeklik tengah tautan Anda untuk membuka tab baru atau jika JavaScript dinonaktifkan.

Jika itu tidak memungkinkan, maka Anda setidaknya harus menyuntikkan tag jangkar ke dalam dokumen dengan JavaScript dan penangan peristiwa klik yang sesuai.

Saya menyadari ini tidak selalu mungkin, tetapi menurut saya harus diupayakan untuk mengembangkan situs web publik apa pun.

Lihat JavaScript yang Tidak Mengganggu dan peningkatan Progresif (keduanya Wikipedia).

Melakukan <a href="#" onclick="myJsFunc();">Link</a>atau <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>atau apa pun yang mengandung onclickatribut - baik-baik saja kembali lima tahun yang lalu, meskipun sekarang bisa menjadi praktik yang buruk. Inilah alasannya:

1. Ini mempromosikan praktik JavaScript yang mencolok - yang ternyata sulit dipertahankan dan sulit untuk ditingkatkan. Lebih lanjut tentang ini di JavaScript tidak mengganggu .

2. Anda menghabiskan waktu Anda menulis kode yang sangat terlalu banyak - yang memiliki sedikit manfaat (jika ada) untuk basis kode Anda.

3. Sekarang ada cara yang lebih baik, lebih mudah, dan lebih dapat dipertahankan dan terukur untuk mencapai hasil yang diinginkan.

Cara JavaScript yang tidak mencolok

Hanya saja, tidak memiliki hrefatribut sama sekali! Reset CSS yang baik akan mengatasi gaya kursor default yang hilang, sehingga itu bukan masalah. Kemudian lampirkan fungsionalitas JavaScript Anda menggunakan praktik terbaik yang anggun dan tidak mencolok - yang lebih dapat dipertahankan karena logika JavaScript Anda tetap dalam JavaScript, daripada di markup Anda - yang penting ketika Anda mulai mengembangkan aplikasi JavaScript skala besar yang mengharuskan logika Anda untuk dipecah menjadi komponen dan templat kotak hitam. Lebih lanjut tentang ini dalam Arsitektur Aplikasi JavaScript skala besar

Contoh kode sederhana

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Sebuah blackboxed Backbone.js contoh

Untuk contoh komponen scalable, blackboxed, Backbone.js - lihat contoh jsfiddle ini di sini . Perhatikan bagaimana kami menggunakan praktik JavaScript yang tidak mencolok, dan dalam jumlah kecil kode memiliki komponen yang dapat diulangi beberapa kali di halaman tanpa efek samping atau konflik antara berbagai komponen yang berbeda. Luar biasa!

Catatan

• Menghilangkan hrefatribut pada aelemen akan menyebabkan elemen tidak dapat diakses menggunakan tabnavigasi tombol. Jika Anda ingin agar elemen-elemen itu dapat diakses melalui tabkunci, Anda dapat mengatur tabindexatribut, atau menggunakan buttonelemen sebagai gantinya. Anda dapat dengan mudah menata elemen tombol agar terlihat seperti tautan normal seperti yang disebutkan dalam jawaban Tracker1 .

• Menghilangkan hrefatribut pada aelemen akan menyebabkan Internet Explorer 6 dan Internet Explorer 7 tidak mengambil a:hovergaya, itulah sebabnya kami telah menambahkan shim JavaScript sederhana untuk mencapai ini via a.hovergantinya. Yang benar-benar oke, seolah-olah Anda tidak memiliki atribut href dan tidak ada degradasi yang anggun maka tautan Anda tidak akan berhasil - dan Anda akan memiliki masalah yang lebih besar untuk dikhawatirkan.

• Jika Anda ingin tindakan Anda tetap berfungsi dengan JavaScript dinonaktifkan, maka gunakan aelemen dengan hrefatribut yang mengarah ke beberapa URL yang akan melakukan tindakan secara manual alih-alih melalui permintaan Ajax atau apa pun yang harus menjadi cara untuk pergi. Jika Anda melakukan ini, maka Anda ingin memastikan Anda melakukan event.preventDefault()panggilan klik untuk memastikan ketika tombol diklik tidak mengikuti tautan. Opsi ini disebut degradasi yang anggun.

'#'akan membawa pengguna kembali ke bagian atas halaman, jadi saya biasanya memilih void(0).

javascript:; juga berperilaku seperti javascript:void(0);

Sejujurnya saya tidak menyarankan. Saya akan menggunakan gaya <button></button>untuk perilaku itu.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

Dengan cara ini Anda dapat menetapkan onclick Anda. Saya juga menyarankan mengikat melalui skrip, tidak menggunakan onclickatribut pada tag elemen. Satu-satunya gotcha adalah efek teks psuedo 3d di IE yang lebih lama yang tidak dapat dinonaktifkan.

Jika Anda HARUS menggunakan elemen A, gunakan javascript:void(0);untuk alasan yang telah disebutkan.

• Akan selalu mencegat jika acara onclick Anda gagal.
• Tidak akan ada panggilan beban yang salah terjadi, atau memicu acara lain berdasarkan perubahan hash
• Tag hash dapat menyebabkan perilaku yang tidak terduga jika klik gagal (onclick throws), hindari kecuali itu adalah perilaku fall-through yang sesuai, dan Anda ingin mengubah riwayat navigasi.

CATATAN: Anda dapat mengganti 0dengan string seperti javascript:void('Delete record 123')yang dapat berfungsi sebagai indikator tambahan yang akan menunjukkan apa yang sebenarnya akan dilakukan oleh klik.

Yang pertama, idealnya dengan tautan nyata untuk diikuti jika pengguna menonaktifkan JavaScript. Pastikan untuk mengembalikan false untuk mencegah peristiwa klik dari penembakan jika JavaScript dijalankan.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Jika Anda menggunakan Angular2, cara ini berfungsi:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Lihat di sini https://stackoverflow.com/a/45465728/2803344

Baik jika Anda bertanya kepada saya;

Jika "tautan" Anda memiliki tujuan tunggal menjalankan beberapa kode JavaScript, itu tidak memenuhi syarat sebagai tautan; bukan sepotong teks dengan fungsi JavaScript yang digabungkan dengannya. Saya akan merekomendasikan untuk menggunakan <span>tag dengan onclick handlerlampiran dan beberapa CSS dasar untuk meniru tautan. Tautan dibuat untuk navigasi, dan jika kode JavaScript Anda bukan untuk navigasi, itu tidak boleh berupa <a>tag.

Contoh:

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

Idealnya Anda akan melakukan ini:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Atau, lebih baik lagi, Anda akan memiliki tautan tindakan default di HTML, dan Anda akan menambahkan acara onclick ke elemen secara tidak mencolok melalui JavaScript setelah DOM dirender, sehingga memastikan bahwa jika JavaScript tidak ada / digunakan, Anda tidak memiliki penangan acara yang tidak berguna mengacaukan kode Anda dan berpotensi mengaburkan (atau setidaknya mengganggu) konten Anda yang sebenarnya.

Menggunakan hanya #membuat beberapa gerakan lucu, jadi saya akan merekomendasikan untuk digunakan #selfjika Anda ingin menghemat upaya mengetik JavaScript bla, bla,.

Saya menggunakan yang berikut ini

<a href="javascript:;" onclick="myJsFunc();">Link</a>

sebagai gantinya

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

Saya setuju dengan saran di tempat lain yang menyatakan bahwa Anda harus menggunakan URL biasa dalam hrefatribut, lalu memanggil beberapa fungsi JavaScript di onclick. Kekurangannya adalah, mereka secara otomatis menambahkan return falsesetelah panggilan.

Masalah dengan pendekatan ini adalah, bahwa jika fungsi tidak akan berfungsi atau jika akan ada masalah, tautan akan menjadi tidak dapat diklik. Acara onclick akan selalu kembali false, sehingga URL normal tidak akan dipanggil.

Ada solusi yang sangat sederhana. Biarkan fungsi kembali truejika berfungsi dengan benar. Kemudian gunakan nilai yang dikembalikan untuk menentukan apakah klik harus dibatalkan atau tidak:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Perhatikan, bahwa saya meniadakan hasil doSomething()fungsi. Jika berhasil, ia akan kembali true, sehingga akan dinegasikan ( false) dan path/to/some/URLtidak akan dipanggil. Jika fungsi akan kembali false(misalnya, browser tidak mendukung sesuatu yang digunakan dalam fungsi atau ada yang salah), itu dinegasikan ke truedan path/to/some/URLdisebut.

#lebih baik daripada javascript:anything, tetapi berikut ini bahkan lebih baik:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Anda harus selalu berusaha untuk degradasi yang anggun (dalam hal pengguna tidak mengaktifkan JavaScript ... dan ketika itu dengan spesifikasi. Dan anggaran). Selain itu, dianggap sebagai bentuk buruk untuk menggunakan atribut JavaScript dan protokol langsung dalam HTML.

Saya sarankan menggunakan <button>elemen sebagai gantinya, terutama jika kontrol seharusnya menghasilkan perubahan dalam data. (Sesuatu seperti POST.)

Bahkan lebih baik jika Anda menyuntikkan elemen secara tidak mencolok, jenis peningkatan progresif. (Lihat komentar ini .)

Kecuali Anda menulis tautan menggunakan JavaScript (sehingga Anda tahu itu diaktifkan di browser), idealnya Anda harus menyediakan tautan yang tepat untuk orang-orang yang browsing dengan JavaScript dinonaktifkan dan kemudian mencegah tindakan default tautan di onclick Anda. pengendali acara. Dengan cara ini mereka yang mengaktifkan JavaScript akan menjalankan fungsi dan mereka yang dinonaktifkan JavaScript akan melompat ke halaman yang sesuai (atau lokasi dalam halaman yang sama) daripada hanya mengklik tautan dan tidak terjadi apa-apa.

Jelas hash ( #) lebih baik karena dalam JavaScript itu adalah pseudoscheme:

1. mencemari sejarah
2. instantiate salinan mesin baru
3. berjalan dalam lingkup global dan tidak menghormati sistem acara.

Tentu saja "#" dengan handler onclick yang mencegah aksi default adalah [jauh] lebih baik. Selain itu, tautan yang memiliki tujuan tunggal untuk menjalankan JavaScript tidak benar-benar "tautan" kecuali jika Anda mengirim pengguna ke beberapa jangkar yang masuk akal pada halaman (hanya # akan mengirim ke atas) ketika terjadi kesalahan. Anda cukup mensimulasikan tampilan dan nuansa tautan dengan stylesheet dan lupakan href sama sekali.

Selain itu, mengenai saran cowgod, khususnya ini: ...href="javascript_required.html" onclick="...Ini adalah pendekatan yang baik, tetapi tidak membedakan antara skenario "JavaScript dinonaktifkan" dan "onclick gagal".

Saya biasanya pergi untuk

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Ini lebih pendek dari javascript: void (0) dan melakukan hal yang sama.

Saya akan menggunakan:

<a href="#" onclick="myJsFunc();return false;">Link</a>

Alasan:

1. Ini membuat hrefsederhana, mesin pencari membutuhkannya. Jika Anda menggunakan hal lain (seperti string), ini dapat menyebabkan 404 not foundkesalahan.
2. Ketika mouse melayang di atas tautan, itu tidak menunjukkan bahwa itu adalah skrip.
3. Dengan menggunakan return false;, halaman tidak melompat ke atas atau merusak backtombol.

Saya memilih menggunakan javascript:void(0), karena menggunakan ini dapat mencegah klik kanan untuk membuka menu konten. Tetapi javascript:;lebih pendek dan melakukan hal yang sama.

Jadi, ketika Anda melakukan beberapa hal JavaScript dengan <a />tag dan jika Anda meletakkannya href="#"juga, Anda dapat menambahkan return false di akhir acara (dalam hal pengikatan acara inline) seperti:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Atau Anda dapat mengubah atribut href dengan JavaScript seperti:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

atau

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Tapi secara semantik, semua cara di atas untuk mencapai ini salah (itu berfungsi dengan baik) . Jika ada elemen yang tidak dibuat untuk menavigasi halaman dan yang memiliki beberapa hal JavaScript yang terkait dengannya, maka itu tidak boleh a<a> tag.

Anda cukup menggunakan a <button />untuk melakukan hal-hal atau elemen lain seperti b, span atau apa pun yang sesuai dengan kebutuhan Anda, karena Anda diizinkan untuk menambahkan acara pada semua elemen.

Jadi, ada satu manfaat yang bisa digunakan <a href="#">. Anda mendapatkan kursor kursor secara default pada elemen itu saat melakukannyaa href="#" . Untuk itu, saya pikir Anda dapat menggunakan CSS untuk seperti inicursor:pointer; yang memecahkan masalah ini juga.

Dan pada akhirnya, jika Anda mengikat acara dari kode JavaScript itu sendiri, di sana Anda dapat melakukannya event.preventDefault()untuk mencapai ini jika Anda menggunakan <a>tag, tetapi jika Anda tidak menggunakan<a> tag untuk ini, di sana Anda mendapatkan keuntungan, Anda tidak perlu tidak perlu melakukan ini.

Jadi, jika Anda lihat, lebih baik tidak menggunakan tag untuk hal-hal semacam ini.

Jangan gunakan tautan hanya untuk menjalankan JavaScript.

Penggunaan href = "#" menggulir halaman ke atas; penggunaan void (0) menciptakan masalah navigasi di dalam browser.

Alih-alih, gunakan elemen selain tautan:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

Dan tata dengan CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Akan lebih baik menggunakan jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

dan hilangkan keduanya href="#"dan href="javascript:void(0)".

Markup tag jangkar akan seperti

<a onclick="hello()">Hello</a>

Cukup sederhana!

Jika Anda menggunakan AngularJS , Anda dapat menggunakan yang berikut:

<a href="">Do some fancy JavaScript</a>

Yang tidak akan melakukan apa-apa.

Sebagai tambahan

• Ini tidak akan membawa Anda ke bagian atas halaman, seperti (#)
  • Karenanya, Anda tidak perlu kembali secara eksplisit falsedengan JavaScript
• Ini singkat

Jika tidak ada, hrefmungkin tidak ada alasan untuk menggunakan tag anchor.

Anda dapat melampirkan acara (klik, arahkan, dll.) Pada hampir setiap elemen, jadi mengapa tidak menggunakan a spanatau a sajadiv ?

Dan untuk pengguna dengan JavaScript dinonaktifkan: jika tidak ada fallback (misalnya, alternatif href), mereka setidaknya harus tidak dapat melihat dan berinteraksi dengan elemen itu sama sekali, apa pun itu <a>atau <span>tag.

Biasanya, Anda harus selalu memiliki tautan mundur untuk memastikan bahwa klien dengan JavaScript dinonaktifkan masih memiliki beberapa fungsi. Konsep ini disebut JavaScript tidak mencolok.

Contoh ... Katakanlah Anda memiliki tautan pencarian berikut:

<a href="search.php" id="searchLink">Search</a>

Anda selalu dapat melakukan hal berikut:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Dengan begitu, orang-orang dengan JavaScript dinonaktifkan diarahkan ke search.phpsementara pemirsa Anda dengan JavaScript melihat fungsionalitas yang ditingkatkan.

Saya pribadi menggunakannya dalam kombinasi. Sebagai contoh:

HTML

<a href="#">Link</a>

dengan sedikit jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

atau

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Tapi saya menggunakan itu hanya untuk mencegah halaman melompat ke atas ketika pengguna mengklik jangkar kosong. Saya jarang menggunakan onClick dan onacara lainnya langsung dalam HTML.

Saran saya adalah menggunakan <span>elemen dengan classatribut bukan jangkar. Sebagai contoh:

<span class="link">Link</span>

Kemudian tetapkan fungsinya .linkdengan skrip yang dibungkus di badan dan tepat sebelum </body>tag atau dalam dokumen JavaScript eksternal.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Catatan: Untuk elemen yang dibuat secara dinamis, gunakan:

$('.link').on('click', function() {
    // do something
});

Dan untuk elemen yang dibuat secara dinamis yang dibuat dengan elemen yang dibuat secara dinamis, gunakan:

$(document).on('click','.link', function() {
    // do something
});

Kemudian Anda bisa mendesain elemen rentang agar terlihat seperti jangkar dengan sedikit CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Berikut ini adalah contoh jsFiddle di atas.

Bergantung pada apa yang ingin Anda capai, Anda bisa melupakan onclick dan cukup gunakan href:

<a href="javascript:myJsFunc()">Link Text</a>

Itu sekitar kebutuhan untuk mengembalikan false. Saya tidak suka #opsi karena, seperti yang disebutkan, itu akan membawa pengguna ke bagian atas halaman. Jika Anda memiliki tempat lain untuk mengirim pengguna jika mereka tidak mengaktifkan JavaScript (yang jarang terjadi di tempat saya bekerja, tetapi ide yang sangat bagus), maka metode yang diusulkan Steve berfungsi dengan baik.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Terakhir, Anda dapat menggunakan javascript:void(0)jika Anda tidak ingin ada orang pergi ke mana pun dan jika Anda tidak ingin memanggil fungsi JavaScript. Ini bekerja sangat baik jika Anda memiliki gambar yang Anda inginkan terjadi peristiwa mouseover, tetapi tidak ada yang bisa diklik pengguna.

Ketika saya punya beberapa tautan palsu, saya lebih suka memberi mereka kelas 'tanpa tautan'.

Kemudian di jQuery, saya menambahkan kode berikut:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

Dan untuk HTML, tautannya sederhana

<a href="/" class="no-link">Faux-Link</a>

Saya tidak suka menggunakan Hash-Tag kecuali mereka digunakan untuk jangkar, dan saya hanya melakukan di atas ketika saya punya lebih dari dua tautan palsu, kalau tidak saya akan menggunakan javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Biasanya, saya ingin menghindari menggunakan tautan sama sekali dan hanya membungkus sesuatu dalam rentang dan menggunakannya sebagai cara untuk mengaktifkan beberapa kode JavaScript, seperti pop-up atau mengungkapkan konten.

Saya yakin Anda menunjukkan dikotomi yang salah. Ini bukan hanya dua opsi.

Saya setuju dengan Tn. D4V360 yang menyarankan itu, meskipun Anda menggunakan tag jangkar, Anda tidak benar-benar memiliki jangkar di sini. Yang Anda miliki hanyalah bagian khusus dari dokumen yang harus berperilaku sedikit berbeda. Sebuah <span>tag jauh lebih tepat.

Saya mencoba keduanya di google chrome dengan alat pengembang, dan id="#"butuh 0,32 detik. Sedangkan javascript:void(0)metode hanya butuh 0,18 detik. Jadi di google chrome, javascript:void(0)bekerja lebih baik dan lebih cepat.

Saya pada dasarnya mengutip dari artikel praktis ini menggunakan peningkatan progresif . Jawaban singkatnya adalah bahwa Anda tidak pernah menggunakan javascript:void(0);atau #kecuali antarmuka pengguna Anda telah menyimpulkan bahwa JavaScript diaktifkan, dalam hal ini Anda harus menggunakanjavascript:void(0); . Juga, jangan gunakan span sebagai tautan, karena itu semantik semula.

Menggunakan rute URL SEO friendly di aplikasi Anda, seperti / Home / Action / Parameter adalah praktik yang baik juga. Jika Anda memiliki tautan ke halaman yang berfungsi tanpa JavaScript terlebih dahulu, Anda dapat meningkatkan pengalaman sesudahnya. Gunakan tautan asli ke halaman kerja, lalu tambahkan acara onlick untuk menyempurnakan presentasi.

Berikut ini contohnya. Beranda / ChangePicture adalah tautan yang berfungsi ke formulir pada halaman yang dilengkapi dengan antarmuka pengguna dan tombol kirim HTML standar, tetapi tampaknya lebih baik disuntikkan ke dalam dialog modal dengan tombol jQueryUI. Either way bekerja, tergantung pada browser, yang memuaskan pengembangan pertama mobile.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>