点击jquery加载html模板

Question

have main html template and sub html template.

<button id="btn">Click Me...</button>

Main HTML:

<div id="main">
 <label>Main</label>
</div>

Sub HTML:

<label>sub</label>

JQuery:

$(document).on("click", "#btn", function(e) {
            e.preventDefault();
            $("#main").load("main.html");


        });

Scenario trying to achieve is I have a common button in all the pages. In default page ie Main.html I will show its label. once on click of the button I want to replace the label of main.html with sub.html, Again on click of the button I need to toggle it with the default label.

Can anyone help me out how to achieve this.

Answer 1

i think this Fiddle is what the OP wants to achieve

loading the html files alternatively :

var loadMain = true;
var loadSub = false;
$(document).on("click", "#btn", function(e) {
            e.preventDefault();
    if(loadMain){
            $("#main").load("main.html");
        alert("HERE");
            loadSub = true;
            loadMain = false;
    }else{
         $("#main").load("sub.html");
        alert("THERE");
            loadMain = true;
            loadSub = false;
    }

});

Answer 2

You can change label text with jquery: Try this:

$(document).on("click", "#btn", function(e) {

            $("#main").load("main.html");

        if ($("#expanderSign").text() == "Main"){
            $("#expanderSign").html("sub")
        }
        else {
            $("#expanderSign").text("Main")
        }

        });

http://jsfiddle.net/wcd7N/

Answer 3

Here's a fiddle with your code:

$(document).on("click", "#btn", function (e) {
  e.preventDefault();
  $("#main").load("/echo/html/", {html: "<label>sub</label>"});
});

http://jsfiddle.net/cnnhg/2/

The only difference with yours is you don't need that data argument, you use a file. Something else is wrong, like adding the onclick before the button is ready.