我有一些代码在JSFiddle中工作但我无法在我自己的页面中运行.
HTML
<body style="background-color: #000000">
<form oninput="amount.value=range.value" style="color:#1ec2c5;">
<output name="amount" for="range">2</output><a> KM</a>
<input type="range" name="range" min="1" max="9" step="1" value="2" id="test">
</body>
CSS
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
border-radius: 6px;
width: 225px;
height: 6px;
border: 2px solid #eceef1;
outline:none;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #eceef1),
color-stop(0.15, #0c0d17)
); }
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: #1ec2c5;
border: 3px solid #000000;
height: 25px;
width: 25px;
border-radius: 20px;}
JavaScript的
$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) …我有一个简单的表单,其中包含两个输入元素.
<form class="submitform">
<input class="remove_list_items clear_button" type="button" value="A"/>
<input id="logIn_submit" class="clear_button" type="button" value="B" />
</form>
我看到源代码中写的表单.
然而,当我检查输入元件(右击>检查元件/ F12)的形式的标签简单地消失(I还可以通过以下事实告诉输入元件是100%,而不是由所述形式在宽度减小(通过CSS).
什么奇怪的是,如果我从源代码(CTRL + U)复制表单代码,通过inspect元素(F12)编辑代码并替换代码,一切都是应该的.
源代码中的代码(如果我通过inspect元素编辑,则可以使用):
<form class="submitform">
<input class="remove_list_items clear_button" type="button" value="A"/>
<input id="logIn_submit" class="clear_button" type="button" value="B" />
</form>
页面加载时通过Inspect Element看到的代码(注意缺少FORM标签):
<input class="remove_list_items clear_button" type="button" value="A"/>
<input id="logIn_submit" class="clear_button" type="button" value="B" />
这在Chrome和In IE 10中都会发生.
我在页面上有其他正确显示的表单.
知道为什么会这样吗？
我有一个带有一些HTML的简单PHP文件（使用toggle()功能使用UL> LI> UL> LI的形式获取列表。该功能将打开UL，并显示或隐藏LI）。该页面还具有可以正常工作的输入表单（将数据添加到数据库）。
一旦AJAX表单成功完成，我将删除整个表单并div从数据库中重新打印。
我的问题：新页面打印完成后，该toggle()功能将停止工作，直到刷新页面为止。
切换功能（在外部JavaScript文件中）：
$(document).ready(function() {
$(".product_category").click(function(event) {
event.preventDefault();
$(this).find("ul > .product").toggle();
});
});
表格：
<form id="addPForm">
<section id="product_input">
<input id="list_add_product" type="text" placeholder="Add a new product" onkeyup="checkProducts()">
<input id="list_add_product_button" type="button">
</section>
</form>
表单发送功能：
$("#list_add_product_button").click(function(event){
var txt=$("#list_add_product").val();
$.ajax({
type: "POST",
url: "addproduct2.php",
cache: false,
data: {product: txt},
success: onSuccess,
error: onError
});
// IF THE SUBMIT WAS SUCCESFULL //
function onSuccess(data, status)
{
console.log(data);
clearInput();
$('#main_list').empty();
$('#main_list').html(data);
}
function onError(data,status){
// something …我有一个三个浮动输入，它们根据屏幕宽度移动，这意味着它们可以并排或彼此重叠。
对于每个元素，我需要绝对根据 INPUT 元素放置文本位置。我知道position:relative（对于父元素）和position:absolute对于子元素（文本）。
我的问题，而且可能是一个新手问题。如何为元素创建子元素<input>（因为它没有结束标签）？
代码示例：
<input class="floating element" style="position:relative;">
<section class="text_for_floating_element" style="position:absolute; top:20px; left:20px;">
在上面的示例中，该<section>元素不是该元素的子元素<input>，因此该<section>元素将根据最接近的父元素而不是所需的元素进行定位。如何使该<section>元素成为该元素的子<input>元素？