Question

我正在使用jquery mobile 1.4.3构建移动应用程序，我试图创建一个列表视图，其中每行有2个按钮。问题是，＆＃34; div＆＃34;，以及我插入的按钮，没有出现，这里是小提琴示例：FIDDLE

代码示例：

var $menuList = $("#suggestions-list");

$menuList.empty();

var listItem = document.createElement("li");
var divForButtons = document.createElement("div");
var anchor = document.createElement("a");
var buttonAdd = document.createElement("a");
var buttonDelete = document.createElement("a");
var header1 = document.createElement("h1");
var header = document.createElement("h3");
var paragraph = document.createElement("p");

anchor.setAttribute("href", "");
anchor.setAttribute("data-id", "hey");

header.textContent = "something";
header1.textContent = "hello";
paragraph.textContent = "10" + "€";

buttonAdd.setAttribute("href", "#");
buttonAdd.setAttribute("data-role", "button");
buttonAdd.setAttribute("id", "btnUserSugAdd");
buttonAdd.setAttribute("data-id", "1");
buttonAdd.setAttribute("class", "split-custom-button");
buttonAdd.setAttribute("data-icon", "plus");
buttonAdd.setAttribute("data-rel", "dialog");
buttonAdd.setAttribute("data-theme", "c");
buttonAdd.setAttribute("data-iconpos", "notext");
buttonAdd.setAttribute("data-icon-position", "right");

buttonDelete.setAttribute("href", "#");
buttonDelete.setAttribute("align", "left");
buttonDelete.setAttribute("data-role", "button");
buttonDelete.setAttribute("id", "btnUserSugDel");
buttonDelete.setAttribute("data-id", "2");
buttonDelete.setAttribute("class", "split-custom-button");
buttonDelete.setAttribute("data-icon", "delete");
buttonDelete.setAttribute("data-rel", "dialog");
buttonDelete.setAttribute("data-theme", "c");
buttonDelete.setAttribute("data-iconpos", "notext");
buttonAdd.setAttribute("data-icon-position", "left");


divForButtons.appendChild(buttonAdd);
divForButtons.appendChild(buttonDelete);

anchor.appendChild(header);
anchor.appendChild(header1);
anchor.appendChild(paragraph);

listItem.appendChild(anchor);
listItem.appendChild(divForButtons);

$menuList.append(listItem);


$menuList.listview('refresh');

Answer 1

他们出现了。只是没有内部文字。试试这个：

var $menuList = $("#suggestions-list");

$menuList.empty(); 

    var listItem = document.createElement("li");
    var divForButtons = document.createElement("div");
    var anchor = document.createElement("a");
    var buttonAdd = document.createElement("a");
    var buttonDelete = document.createElement("a");
    var header1 = document.createElement("h1");
    var header = document.createElement("h3");
    var paragraph = document.createElement("p");

    anchor.setAttribute("href", "");
    anchor.setAttribute("data-id", "hey");

    header.textContent = "something";
    header1.textContent = "hello";
    paragraph.textContent = "10" + "€";

    buttonAdd.setAttribute("href", "#");
    buttonAdd.setAttribute("data-role", "button");
    buttonAdd.setAttribute("id", "btnUserSugAdd");
    buttonAdd.setAttribute("data-id", "1");
    buttonAdd.setAttribute("class", "split-custom-button");
    buttonAdd.setAttribute("data-icon", "plus");
    buttonAdd.setAttribute("data-rel", "dialog");
    buttonAdd.setAttribute("data-theme", "c");
    buttonAdd.setAttribute("data-iconpos", "notext");
    buttonAdd.setAttribute("data-icon-position", "right");
    buttonAdd.text = "Add";//add text to button add

    buttonDelete.setAttribute("href", "#");
    buttonDelete.setAttribute("align", "left");
    buttonDelete.setAttribute("data-role", "button");
    buttonDelete.setAttribute("id", "btnUserSugDel");
    buttonDelete.setAttribute("data-id", "2");
    buttonDelete.setAttribute("class", "split-custom-button");
    buttonDelete.setAttribute("data-icon", "delete");
    buttonDelete.setAttribute("data-rel", "dialog");
    buttonDelete.setAttribute("data-theme", "c");
    buttonDelete.setAttribute("data-iconpos", "notext");       
    buttonAdd.setAttribute("data-icon-position", "left");
    buttonDelete.text = "Delete"; //Add text to button delete


    divForButtons.appendChild(buttonAdd);
    divForButtons.appendChild(buttonDelete);

    anchor.appendChild(header);
    anchor.appendChild(header1);
    anchor.appendChild(paragraph);

    listItem.appendChild(anchor);
    listItem.appendChild(divForButtons);

    $menuList.append(listItem);


$menuList.listview('refresh');

fiddle

Answer 2

设置一些文本以查看锚元素

buttonAdd.innerHTML='A';

Answer 3

我先将演示链接放入，然后解释：

以下是您更新的 FIDDLE

向<UL>添加课程（例如has-editBtns）：

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

给divForButtons <DIV>一类editBtns，并使用jQM 1.4类作为按钮：

var listItem = document.createElement("li");
var divForButtons = document.createElement("div");
var anchor = document.createElement("a");
var buttonAdd = document.createElement("a");
var buttonDelete = document.createElement("a");
var header1 = document.createElement("h1");
var header = document.createElement("h3");
var paragraph = document.createElement("p");

anchor.setAttribute("href", "");
anchor.setAttribute("data-id", "hey");

header.textContent = "something";
header1.textContent = "hello";
paragraph.textContent = "10" + "€";

buttonAdd.setAttribute("href", "#");
buttonAdd.setAttribute("id", "btnUserSugAdd");
buttonAdd.setAttribute("data-id", "1");
buttonAdd.setAttribute("class", "ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all");

buttonDelete.setAttribute("href", "#");
buttonDelete.setAttribute("id", "btnUserSugDel");
buttonDelete.setAttribute("data-id", "2");
buttonDelete.setAttribute("class", "ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all");

divForButtons.setAttribute("class", "editBtns");
divForButtons.appendChild(buttonAdd);
divForButtons.appendChild(buttonDelete);

anchor.appendChild(header);
anchor.appendChild(header1);
anchor.appendChild(paragraph);

listItem.appendChild(anchor);
listItem.appendChild(divForButtons);

最后为这些类添加一些CSS规则：

.has-editBtns li > a {
    margin-left: 40px !important;
}
.editBtns {
    position: absolute;
    top: 0px;
    width: 39px;
    bottom: 0px;
    padding-left: 6px;
    border-top: 1px solid rgb(221, 221, 221);
}
.editBtns a:first-child {
    position: absolute;
    bottom: 50%;
    margin-bottom: 2px;
}
.editBtns a:last-child {
    position: absolute;
    top: 50%;
    margin-top: 2px;
}

这会将主链接移动到右侧，为按钮留出空间。按钮div绝对位于左侧，2个按钮一个位于另一个上方。

列表视图行setattribute div有两个按钮

3 个答案: