無法使用jquery更改屬性數據-***

我不明白爲什麼沒有執行按鈕請求。我必須改變手機屏幕的方向，但直到它現在工作。無法使用jquery更改屬性數據-***

$("button.btn-tooltip").attr("data-placement", "left");

body { 
 
    padding: 10px; 
 
} 
 

 
button { 
 
    width: 100px; 
 
    height: 30px; margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<button type="button" class="btn btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip"></button>

來源

2017-07-27 Nick Gl

作爲發佈的代碼工作。跟隨'console.log（document.querySelector（「.btn」）。dataset.placement）;'來驗證。還有其他的錯誤。 – traktor53

你可能看默認 tooltip，而不是Bootstrap的工具提示。常規工具欄默認爲右下角，它可以讓你right的data-placement困惑：

$("button.btn-tooltip").attr("data-placement", "left");

body { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<button type="button" 
 
     class="btn btn-tooltip" 
 
     data-toggle="tooltip" 
 
     data-placement="right" 
 
     title="Tooltip"> 
 
     Text 
 
</button>

要使用引導提示，你需要記住與初始化它們：

$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
});

添加該代碼顯示了按照預期的data-placement變化確實工作：

$(document).ready(function(){ 
 
    $('[data-toggle="tooltip"]').tooltip(); 
 
}); 
 

 
$("button.btn-tooltip").attr("data-placement", "left");

body { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<button type="button" 
 
     class="btn btn-tooltip" 
 
     data-toggle="tooltip" 
 
     data-placement="right" 
 
     title="Tooltip"> 
 
     Text 
 
</button>

如果你的代碼是不是給你同樣的結果，那麼你的JavaScript可能在運行前的DOM完全加載（這意味着該按鈕將不存在爲它進行操作）。

在這種情況下，請確保您的代碼被封裝在$(document).ready(function(){})之內，以強制JavaScript等待該按鈕被創建。

希望這會有所幫助！ :)

來源

2017-07-27 23:13:43

非常感謝！ –

我覺得屬性確實增加，而是因爲你的引導之後添加屬性已經初始化，所以這是行不通的。你是否在bootstrap中使用工具提示？你可以嘗試設置之前調用
$（ 'button.btn-提示'）的屬性。提示（）

來源

2017-07-27 23:07:57 Barry

你可以做

$("button.btn-tooltip").data("placement", "left");

來源

2017-07-27 23:10:47

您的代碼書面工作正常，因爲在這裏看到： http://jsbin.com/xozuseyeyi/edit?html,js,output

我懷疑是你的JavaScript代碼運行在你的按鈕在DOM可用。

你有沒有嘗試在一個document.ready（）處理程序或類似的內部包裝你的代碼？

$(document).ready(function() { 
    $("button.btn-tooltip").data("placement", "left"); 
});

來源

2017-07-27 23:15:14 AnilRedshift

無法使用jquery更改屬性數據-***

回答

相關問題