如何使用jQuery Mobile动态创建按钮

How to create a button dynamically using jQuery Mobile?

本文关键字:创建 按钮 动态 Mobile 何使用 jQuery      更新时间:2023-09-26

我想使用jQuery动态创建一个按钮。请注意,我使用jQuery 1.9.1和jQuery Mobile 1.3.1。该按钮应该具有以下属性:

<button id="WPshare" onclick="window.plugins.socialsharing.share('Share this message', null, null, null)">Share</button>

我有以下HTML:

<div id="finalPage" data-role="page" data-add-back-btn="false">
            <div data-role="header" data-position="fixed" data-tap-toggle="false">
                <h1>Result</h1>
            </div>
            <div id="share" data-role="content">
                <ul data-role="listview" id="myTripView" data-inset="true" data-theme="d">
                    <li>
                        <a href="#home" data-transition="slide" style="font-size:14px;">Home</a>
                    </li>
                </ul>
            </div>
</div>

我想在div中创建id为"share",它应该在<ul>元素下。有什么办法吗?

使用jQuery 后()

button = $('<button id="WPshare" onclick="window.plugins.socialsharing.share(''Share this message'', null, null, null)">Share</button>');
$('#share ul').after(button);
button.button();

演示小提琴

button.button()是一个jQuery移动按钮函数。它提供了一个功能性和JQM风格的按钮。


或.append ()

var button = $('<button id="WPshare" onclick="window.plugins.socialsharing.share(''Share this message'', null, null, null)">Share</button>');
$('#share').append(button);
button.button();

shaunakde的回答将工作,但我认为这种方式更"清楚":

    $("<button>", {
                     'id' : "WPshare",
                     text: 'Share',
                     })
                    .on("click", function() {
                window.plugins.socialsharing.share(''Share this message'', null, null, null)"
    }).appendTo("#share");